css3 border-image-width属性笔记

原创 PHP笔记  2017-11-26 17:40  阅读 1,771 views 次

定义及用法

1、在php中,border-image -width属性是用来设置图像边界的宽度;

2、border-image -width属性可以有四个参数,如果省略第四个参数,它会默认和第二个相同的;如果第三个也省略了,它会默认和第一个相同。如果也省略了第二个,它和第一个是相同的。

border-image -width属性值

  • number:表示相应的border-width的倍数;
  • %:边界图像区域的大小:横向偏移的宽度的面积,垂直偏移的高度的面积;
  • auto:宽度是相应的image slice的内在宽度或高度

实例:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 border-image-width属性笔记</title>
<style>
.width{background-color:#6ee;border:30px solid transparent;
border-image: url('https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png');
border-image-repeat: repeat;border-image-slice:30;border-image-width:2}
</style>
<head/>
<body>
<div class="width">
css3 border-image-width属性演示!
</div>
<p>图片原型:</p>
<img src="https://www.ggbiji.com/wp-content/uploads/2017/11/border-image.png">
</body>
</html>

运行结果:

css3 border-image-width属性笔记

相关属性——>css3 border-image边框图片属性笔记(可以使用border-image属性来设置所有 的border-image-*属性)

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/border-image-width.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情