• 技术文章 >web前端 >前端问答

    css border-image-width属性怎么用

    青灯夜游青灯夜游2019-05-30 16:49:25原创1264
    css border-image-width属性用于指定图像边界的宽度,可以设置4个值(不可为负值),把边框图像分割为九个部分。它们代表了从区域的上、右、下、左侧向内的距离。

    css border-image-width属性怎么用?

    border-image-width属性规定图像边框的宽度。

    语法:

    border-image-width: number|%|auto;

    属性值:

    number:表示相应的border-width 的倍数

    %:边界图像区域的大小:横向偏移的宽度的面积,垂直偏移的高度的面积

    auto:如果指定了,宽度是相应的image-slice的内在宽度或高度。

    注释:

    border-image-width 属性的的4个值指定用于把边框图像分割为九个部分。它们代表了从区域的上、右、下、左侧向内的距离。

    如果忽略第四个值,则与第二个值相同。如果省略第三个值,则与第一个值相同。如果省略第二个值,则与第一个值相同。不允许任何负值作为 border-image-width 值。

    css border-image-width属性 示例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<style>
    			div {
    				border: 30px solid transparent;
    				border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
    				border-image-width: auto;
    				border-image-repeat: round;
    				border-image-slice: 30;
    			}
    		</style>
    	</head>
    	<body>
    		<div>DIV 使用图像边框</div>
    		<p>使用的图片:</p>
    		<img src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png">
    
    	</body>
    
    </html>

    效果图:

    1.jpg

    以上就是css border-image-width属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:css @keyframes规则怎么用 下一篇:css font-stretch属性怎么用
    Web大前端开发直播班

    相关文章推荐

    • css nav-down属性怎么用• css min-width属性怎么用• css order属性怎么用• css nav-left属性怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网