CSS3边框:通过CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框-并且不需使用设计软件,比如PhotoShop
属性:border-radius,box-shadow,border-image
浏览器支持:Internet, Explorer9+支持border-radius和box-shadow属性。
Firefox、Chrome以及Safari支持所有新的边框属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1,.div2{
width: 100px;
height: 100px;
line-height: 100px;
border: 1px solid #f00;
text-align: center;
color: #fff;
}
.div1{
border-radius: 20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-webkit--border-radius:20px;
}
.div2{
margin-top: 50px;
background-color: #00f;
box-shadow: 10px 10px 10px orangered;
}
</style>
</head>
<body>
<div class="div1">圆角效果</div>
<div class="div2">阴影效果</div>
</body>
</html>