边框新增属性

·border-radius 设置四个角属性。

·border-top-left-radius 左上角圆角边框。

·border-top-right-radius 又上角圆角边框。

·border-bottom-left-radius 左下角圆角边框。

·border-bottom-right-radius 右下角圆角边框。

·border-image （边框图片）复合属性，设置边框图像来填充，可以依次设置以下属性。

·border-image-source 图像来源路径。

·border-image-slice  边框背景图的分割方式。

·border-image-width  边框宽度。

·border-image-outset  边框背景图的扩展（边框图像区域超出边框的量）。

·border-image-repeat  边框图像的平铺方式：stretch拉伸/repeat重复铺满/round重复 铺满并对图像进行调整。

如：div{

border-image-source:url(a.jpg);

border-image-slice:30; //border-image-slice:30 fill; //fill图片中间部分截取填充

border-image-width:30px;

border-image-outset:10px;

border-image-repeat:round stretch;

}

div{

border-image:url(a.jpg) 30 /20px /10px round;//同时设置时第二、三个属性用/隔开

}

·box-shadow  向方框添加一个阴影。

·none：无阴影。

·阴影水平偏移/阴影垂直偏移/阴影模糊值/阴影外延伸/阴影颜色/inset内阴影（默认 为outset）

如：#div1{box-shadow:5px -5px 5px green;} //阴影映射方向改变

#div1:hover{box-shadow:-5px -5px 5px green;}

#div2{box-shadow:-5px 5px 5px yellow;} //阴影向外延伸效果

#div2:hover{box-shadow:-5px 5px 5px 5px yellow;}

#div3{box-shadow:-5px 5px 5px rgba(0,0,0,1);} //调配淡化阴影

#div3:hover{box-shadow:-5px 5px 5px 5px rgba(0,0,0,0.5);}

#div4{ //阴影向四周延伸

box-shadow:

0px 0px 1px 0px rgba(255,0,0,1),

0px 0px 1px 0px rgba(255,255,0,1),

0px 0px 1px 0px rgba(255,0,255,1);

}

#div4:hover{

box-shadow:

0px 0px 1px 5px rgba(255,0,0,0.5),

0px 0px 1px 10px rgba(255,255,0,0.5),

0px 0px 1px 15px rgba(255,0,255,0.5);

}

转载于:https://www.cnblogs.com/wzjie1234/p/10719282.html