css3的border-image图片边框
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移,可以写入四个值或者fill填满。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
1、border-image-source
初始值:none
Value:none | <image>
可以应用在所有元素上,除了表格的border-collapse为collapse除外。
可以设置图片和渐变等作为边框图像,设置后会覆盖设置的border-style样式。如果为none,则会被border-style替换。
这个属性设置的边框图片宽度与border-image-width有关,如果没有设置border-image-width,则默认是border-width的值。
可以添加linear-gradient或url等属性:
2、border-image-slice
初始值:100%
/* 所有的边 */
border-image-slice: 30%;
/* 垂直方向 | 水平方向 */
border-image-slice: 10% 30%;
/* 顶部 | 水平方向 | 底部 */
border-image-slice: 30 30% 45;
/* 上 右 下 左 (顺时针)*/
border-image-slice: 7 12 14 5;
border-image-slice: 10% 40% 60% 20%;
/* 使用fill(fill可以放在任意位置)*/
border-image-slice: 10% fill 7 12;
3、border-image-width
初始值:1
length是可以带单位的长度。
number是数字,不带单位,指定为相应的border-width的倍数。
百分比是基于边框图像区域(border image area)的宽高。
auto,则边框的宽度(border-image-width)等于相应的边框图像切片(border-image-slice)的固有宽度或高度,如果图像不具有所需的固有尺寸,则使用相应的边框宽度(border-width)。
不允许负值。
/* 自动值 */
border-image-width: auto;
/* 长度 */
border-image-width: 2rem;
/* 百分比 */
border-image-width: 15%;
/* 数值 */
border-image-width: 9;
/* 垂于于水平 */
border-image-width: 5em 7em;
/* 顶部,水平,底部*/
border-image-width: 15% 15% 30%;
/* 上 右 下 左 (顺时针) */
border-image-width: 15% 7em 20% 70%;
4、border-image-outset
初始值:0
length,就是有单位的数值。
number,边框图像的大小是元素相应边框宽度(border-width)的倍数。
/* 长度 */
border-image-outset: 2rem;
/* 数值 */
border-image-outset: 2;
/* 垂于于水平 */
border-image-outset: 2 1.5;
/* 顶部,水平,底部 */
border-image-outset: 25px 3 18px;
/* 上 右 下 左 (顺时针) */
border-image-outset: 9px 15px 24px 6px;
5、border-image-repeat
初始值:stretch
Value:[ stretch | repeat | round | space ]{1,2}
此属性指定边框图像的侧面和中间部分的图像如何缩放和平铺。
第一个关键字适用于顶部,中间和底部的水平缩放和平铺,第二个关键字适用于左,中间和右侧部分的垂直缩放和平铺。
第二个缺省,默认和第一个值一样。
stretch
拉伸,源图像的边缘区域被拉伸以填充每个边框之间的间隙。
repeat
重复,源图像的边缘区域被平铺(重复)以填充每个边框之间的间隙。可能会修剪单元以达到适当的贴合度。单元图像可能会被裁剪一部分。其实和背景图片的重复是一样的。
round
平铺,但是会调整单元图像以达到和区域的适配,保持整数倍的平铺,和背景图片的平铺的round属性值是一样的特性。
space
单元图像不会拉伸变形,如果不能整数倍的重复, 则会产生平分的间隔
如何在这个小对话框里写入内容,当我们进行平铺的时候这个图片是出现在四周的。
<div class="box box3">第一次出国,妈妈帮我整行李,在行李整得差不多的时候,她突然拿出一个透明的小瓶子,里面装着黑色的东西。</div>
css
.box3{ border-image-source: url(img/chat.jpg); }
那我们就可以利用平铺来将内容放进去
css:
.box3{
border-image-source: url(img/chat.jpg);
border-image-repeat: round;
border-image-slice: 33 34 20 70;
}
代码演示: