CSS3 border-image-outset属性怎么用?

border-image-outset属性用于指定在边框外部绘制 边框图像区域的量,即边框图像超过边框盒的量。

CSS3 border-image-outset属性怎么用?

CSS3 border-image-outset 属性

作用:规定边框图像超过边框盒的量。

语法:

border-image-outset: length|number;

登录后复制

length:表示设置边框图像(border-image)与边框的距离,默认为0。

立即学习“前端免费学习笔记(深入)”;

number:代表相应的 border-width 的倍数。

说明:

1、border-image-outset 属性规定边框图像超出边框盒的量,包括上下部和左右部分。如果忽略第四个值,则与第二个值相同。如果省略第三个值,则与第一个值相同。如果省略第二个值,则与第一个值相同。

2、border-image-outset属性不允许使用任何负值。

CSS3 border-image-outset 属性的使用示例

nbsp;html> .box{width: 600px;margin: 100px auto;border: 1px solid red;}p{border:15px solid;padding: 30px;border-image:url(1.jpg) 100 round;border-image-outset: 1px 10px 8px;}
   

PHP中文网

登录后复制

效果图:

没有添加border-image-outset属性:

1.jpg

添加border-image-outset属性后:

2.jpg

以上就是CSS3 border-image-outset属性怎么用?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2888712.html

(0)
上一篇 2025年3月10日 21:14:27
下一篇 2025年3月10日 21:14:35

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • border-image-repeat属性怎么用

    border-image-repeat属性是用于指定图像边框是否应被重复(repeated)、拉伸(stretched)或铺满(rounded)的。 CSS3  border-image-repeat属性 作用:规定图像边框是否应该被重复(…

    2025年3月10日
    200
  • border-image-slice属性怎么用

    border-image-slice属性用于指定图像边框(顶部、右侧、底部、左侧)的向内偏移;没有具体的单位值,只需要给一个单纯的数字值或者按照百分比设置。 CSS3  border-image-slice属性 作用:规定图像的上、右、下、…

    2025年3月10日
    200
  • border-image-source属性怎么用

    border-image-source属性指定要使用的图像,而不是由border-style属性设置的边框样式。 CSS3  border-image-source属性 作用:规定要使用的图像,代替 border-style 属性中设置的边…

    2025年3月10日
    200
  • border-image-width属性怎么用

    border-image-width属性是用来指定图像边界宽度的;可以设置4个值,分别将边框图像区域分割为九个部分的偏移,它们代表上,右,下,左,两侧向内的距离。 CSS3  border-image-width属性 作用:规定图像边框的宽…

    2025年3月10日
    200
  • overflow-x属性怎么用

    overflow-x属性是用来指定当元素溢出内容区域时,是否对内容的左/右边缘进行裁剪。 CSS3  overflow-x属性 作用:overflow-x属性规定是否对内容的左/右边缘进行裁剪 – 如果溢出元素内容区域的话。 提…

    2025年3月10日
    200
  • overflow-y属性怎么用

    overflow-y属性是用来指定当元素溢出内容区域时,是否对内容的顶部/底部边缘进行裁剪。 CSS3  overflow-y属性 作用:overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。 提示:使用overf…

    2025年3月10日
    200
  • column-count属性怎么用

    column-count属性时用来指定某个元素应分为多少列数显示的。 CSS3  column-count属性 作用:column-count属性指定某个元素应分为的列数。 语法: column-count: number|auto; 登录…

    2025年3月10日
    200
  • column-gap属性怎么用

    column-gap属性用于指定的列之间的差距,在指定某个元素应分为多少列之后使用。 CSS3 column-gap属性 作用:column-gap属性用于指定的列之间的差距。 使用条件:在使用column-count属性或column-w…

    2025年3月10日
    200
  • column-width属性怎么用

    column-width属性用于指定列的宽度;当没有明确指定元素的显示列数时,可通过该属性设置显示列数。 CSS3  column-width属性 作用:column-width属性用于指定列的宽度。 语法: column-width: a…

    2025年3月10日
    200
  • CSS3中的background-clip属性怎么用

    CSS3中的background-clip属性的用法:【background-clip:border-box|padding-box|content-box】。background-clip属性用于规定背景的绘制区域。 css backgr…

    2025年3月10日
    200

发表回复

登录后才能评论