[HTML] CSS3 边框

CSS3 边框

用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。

在本章中，您将了解以下的边框属性：

border-radius
box-shadow
border-image

浏览器支持

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

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

注意： 前缀是-webkit-的Safari支持阴影边框。

前缀是-o-的Opera支持边框图像。

CSS3 圆角

在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。

在CSS3中，很容易创建圆角。

在CSS3中border-radius属性被用于创建圆角：

这是圆角边框！

在div中添加圆角元素：

div
{
border:2px solid;
border-radius:25px;
}

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
div
{
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#dddddd;
    width:300px;
    border-radius:40px;
}
</style>
</head>
<body>

<div>border-radius</div>

</body>
</html>

CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影:

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

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

CSS3边界图片

有了CSS3的border-image属性，你可以使用图像创建一个边框：

border-image属性允许你指定一个图片作为边框！用于创建上文边框的原始图像：

在div中使用图片创建边框:

Border

在div中使用图片创建边框

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
div
{
    border:15px solid transparent;
    width:250px;
    padding:10px 20px;
}

#round
{
    -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 round; /* Opera */
    border-image:url(border.png) 30 30 round;
}

#stretch
{
    -webkit-border-image:url(border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(border.png) 30 30 stretch; /* Opera */
    border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>

<p><b>注意: </b> Internet Explorer 不支持 border-image 属性。</p>
<p> border-image 属性用于设置图片的边框。</p>

<div id="round">这里，图像平铺（重复）来填充该区域。</div>
<br>
<div id="stretch">这里，图像被拉伸以填充该区域。</div>

<p>这是我们使用的图片素材：</p>
<img src="/statics/images/border.png" />

</body>
</html>