今天主要学习CSS3中的边框(Border). 这对我们来说并不陌生.多少次写下 border:1px solid red了..那么CSS3中会给我们带来什么惊喜呢？
在CSS3中.边框多了4种新特性
Border-color(设置边框颜色)
Border-image(通过图片设置为边框)
Border-radius(边框的半径)
box-shadow(阴影效果)
用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序
CSS3圆角border-radius属性
CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用：em、ex、pt、px、百分比等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:yellow;
width:300px;
height:300px;
border-radius:25px 15px 40px 0;
}
</style>
</head>
<body>
<div>观察4个角的不同 </div>
</body>
</html>CSS3盒阴影box-shadow属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.border_test
{
border:5px solid red;
-moz-box-shadow:5px 2px 6px black;
-ms-box-shadow:5px 2px 6px black;
-wekit-box-shadow:5px 2px 6px black;
-o-box-shadow:5px 2px 6px black;
box-shadow:5px 2px 6px black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-shadow样式</div>
</body>
</html>CSS3边界图片Border-image
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.border_test
{
-webkit-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-moz-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-o-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-ms-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
-border-image: url(http://pic002.cnblogs.com/images/2012/455414/2012101316502564.jpg) 0 12 0 12 stretch stretch;
display: block;
border-width: 0 12px;
padding: 10px;
text-align: center;
font-size: 26px;
text-decoration: inherit;
color:white;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-image样式</div>
</body>
</html>