CSS3中的边框属性怎么使用

这篇文章主要讲解了“CSS3中的边框属性怎么使用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3中的边框属性怎么使用”吧！

　　css3边框

　　（1）边框阴影

　　box-shadow：h-shadowv-shadowblurspreadcolorinset

　　h-shadow，v-shadow：水平和垂直方向的阴影位置，可以写负值

　　blur：模糊距离（值越大越模糊）。

　　spread：阴影的尺寸

　　color：阴影的颜色

　　inset：将外部阴影(outset)改为内部阴影

　　前面两个值是必选的，后面四个值是可选的

　　div{

　　width:100px;

　　height:100px;

　　background-color:pink;

　　box-shadow:10px10px10pxgray;

　　}

　　Image16.jpg

　　（2）边框图片

　　border-image:srcslicewidthoutsetrepeat

　　src：图片的路径。

　　slice：图片边框向内偏移。

　　width：图片边框的宽度。

　　outset：边框图像区域超出边框的量。

　　repeat：图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)

　　注意浏览器兼容问题

　　div{

　　border:20pxsolidtransparent;

　　width:100px;

　　height:50px;

　　line-height:50px;

　　text-align:center;

　　padding:10px20px;

　　border-image:url(images/12.png)5050round;

　　-moz-border-image:url(images/12.png)5050round;/*Firefox*/

　　-webkit-border-image:url(images/12.jpg)5050round;/*Safari和Chrome*/

　　-o-border-image:url(images/12.png)5050round;/*Opera*/

　　}

　　Image21.jpg

　　（3）边框圆角

　　border-radius

　　div{

　　width:150px;

　　height:30px;

　　border:2pxsolid#ccc;

　　border-radius:25px;

　　line-height:30px;

　　text-align:center;

　　}

感谢各位的阅读，以上就是“CSS3中的边框属性怎么使用”的内容了，经过本文的学习后，相信大家对CSS3中的边框属性怎么使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！