CSS3边框

通过CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,编程之家带大家学习:border-radius; box-shadow;border-image。

CSS3边框-浏览器支持

Internet Explorer 9+ 支持 border-radius 和 box-shadow.

Firefox, Chrome, 和 Safari 支持所有最新的所有border属性.

注释:对于 border-image,Safari 5 以及更老的版本需要前缀 -webkit-。

Opera 支持 border-radius 和 box-shadow 属性,但是对于 border-image 需要前缀 -o-。

CSS3圆角属性border-radius

在CSS2中添加圆角棘手。在CSS3中border-radius属性被用于创建圆角非常的简单,下面看圆角实例。

div
{
border:2px solid #0000FF;
padding:10px 40px; 
background:#66CCFF;
width:300px;
border-radius:25px;
}

以上CSS3代码创建的圆角图像如下图所示

推荐阅读:CSS3 border-radius圆角的实现方法

CSS3边框阴影

在CSS3中,box-shadow用于向方框添加阴影,实例如下

div
{
box-shadow: 10px 10px 5px #888888;
}

CSS3边框图片

通过CSS3的border-image属性,您可以使用图片来创建边框,border-image属性允许您规定用于边框的图片!

div{border:15pxsolidtransparent;width:250px;padding:10px20px;}
#round{-webkit-border-image:url(border.png)
 3030round; /* Safari 5 and older */-o-border-image:url(border.png) 
3030round; /* Opera */border-image:url(border.png) 3030round;}
#stretch{-webkit-border-image:url(border.png)
 3030stretch; /* Safari 5 and older */-o-border-image:url(border.png) 
3030stretch; /* Opera */border-image:url(border.png) 3030stretch;}
html标签部分
<div id="round">这里,图像平铺(重复)来填充该区域。</div>
<div id="stretch">这里,图像被拉伸以填充该区域。</div>

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...