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;

 

　　}

 

　　Image19.jpg

 

　　总结：以上就是本篇文章的全部内容了。希望对大家有所帮助。






本文转载自中文网