通过CSS3简单的实现圆角,双边框,阴影,渐变
Author: 小权

body {
width: 500px;
margin: 60px auto 0;
background: #666;
}
#box {
width: 500px;
height: 500px;
/* 圆角 */
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 2px solid white;
/* 双边 */
-moz-border-top-colors: #292929 white;
-moz-border-right-colors: #292929 white;
-moz-border-bottom-colors: #292929 white;
-moz-border-left-colors: #292929 white;
/* Webkit里面不支持border-color, 用阴影算做个补偿 */
-webkit-box-shadow: 0 -1px 2px #292929;
/* 渐变 */
background: #e3e3e3;
background: -moz-linear-gradient(top, #a4a4a4, #e3e3e3);
background: -webkit-gradient
(linear, left top, left bottombottom, from(#a4a4a4), to(#e3e3e3));
Leave a reply