• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • border-image-width

    版本:CSS3

    CSS border-image-width属性设置元素的边框图像的宽度。假如border-image-width大于已指定的border-width,那么它将向内部(padding/content)扩展。

    示例

    /* Keyword value */
    border-image-width: auto;
    
    /* <length> value */
    border-image-width: 1rem;
    
    /* <percentage> value */
    border-image-width: 25%;
    
    /* <number> value */
    border-image-width: 3;
    
    /* vertical | horizontal */
    border-image-width: 2em 3em;
    
    /* top | horizontal | bottom */
    border-image-width: 5% 15% 10%;
    
    /* top | right | bottom | left */
    border-image-width: 5% 2em 10% auto;
    
    /* Global values */
    border-image-width: inherit;
    border-image-width: initial;
    border-image-width: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE11以上版本的浏览器都支持border-image-width

    语法

    border-image-width:[ <length>| <percentage>| <number>| auto]{1,4}
    • 当指定一个值时,它对所有四个边应用相同的宽度。
    • 当指定两个值时,第一个宽度应用于顶部和底部,第二个宽度应用于左侧和右侧。
    • 当指定三个值时,第一个宽度应用于顶部,第二个宽度应用于左侧和右侧,第三个宽度应用于底部。
    • 当指定四个值时,宽度将按顺时针顺序应用于顶部、右侧、底部和左侧。

    取值:

    • <length>:用长度值指定宽度。不允许负值。
    • <percentage>:用百分比指定宽度。参照其包含块进行计算。不允许负值。
    • <number>:根据元素border-width属性,用倍数表示边框宽度。不允许负值。
    • auto:如果被设置,则border-image-width采用与border-image-slice相同的值。
    默认值1
    适用于所有元素,除table元素设置了border-collapse:collapse之外
    继承性
    动画性
    计算值指定值

    实例:

    border-image-width: 3;
    border-image-width: 2em 3em;
    border-image-width: 5% 15% 10%;
    border-image-width: 5% 2em 10% auto;
    border-image-width: inherit;
    
    p{
     border:15px solid;
     padding:30px;
     width:100px;
     border-image-source:url(images/kuang.jpg);
     border-image-repeat:repeat;
     border-image-width:26% 2%;
    }
    

    效果图:

    border-image-width-border.png
    p {
      border: 20px solid;
      border-image: url("/upload/202006/border-image-width-border.png") 30 round;
      border-image-width: 16px;
      padding: 40px;
    }
    
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
       At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
       no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.