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

日期:2010年04月27日 分类:前端开发, 技术

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));

无觅相关文章插件,快速提升流量

Tags: , ,

这篇文章发布于 2010年04月27日 at 22:23 归类于 前端开发, 技术。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以 留下评论, 或者从您的站点 trackback