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

    版本:CSS3

    CSS属性border-image-source用于声明元素的边框图片(border-image)的资源。属性border-image-slice被用于切割资源图片的区域,然后将其动态的应用到最终的边框图片。

    示例

    /* no border-image, use the specified border-style */
    border-image-source: none;
    
    /* the image.jpg is used as image */
    border-image-source: url(image.jpg);
    
    /* a gradient is used as image */
    border-image-source: linear-gradient(to top, red, yellow);
    
    /* global values */
    border-image-source: inherit;
    border-image-source: initial;
    border-image-source: unset;
    

    浏览器支持

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

    语法

    border-image-source:none| <image>| <linear-gradient>

    取值

    • none:无背景图片。
    • <image>:指定图片资源。参见<image>
    • <linear-gradient>:使用颜色渐变来是实现效果。参见linear-gradient()
    初始值none
    适用于所有元素,除table元素设置了<border-collapse>为collapse之外。也适用于::first-letter
    继承性
    动画性
    计算值指定值

    实例

    p{
    	border:15pxsolid;
    	padding:30px;
    	width:100px;
    	border-image-source:url(images/kuang.jpg);
    	border-image-repeat:repeat;
    	border-image-slice:26%26%;
    }
    

    效果图: