(CSS3)CSS3- 最常用的属性(一)
CSS3带来的种种新特性真的让人振奋,最起码圆角,阴影可以通过编程实现了~可是令人郁闷的是在国内IE6,7,8这些不支持css3的浏览器依然占据了大半壁江山。虽然是这样,但是我们却要有意识的去使用,为支持CSS3的浏览器提供更好的显示效果。如果你是个完美主义者,为了保持一样的效果当然可以借助于图片。
特性一:圆角--border-radius
语法格式:
border-radius:{topleft topright bottomright bottomleft} {topleft,bottomright},{topright,bottomleft} {all}
方向顺时针
div.border{ width:200px; height:25px; margin:10px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; background:#b3d465; border:1px solid #96b64a; text-align:center; font-size:14px; font-weight:bold; color:#fff; line-height:25px; }
在支持CSS3的浏览器中你可以看到圆角效果
圆角测试
不过可惜的是在FireFox中和webkit核心的浏览器中必须加上-moz,-webkit;
特性二:阴影--box-shadow
语法格式:
box-shadow:{length} {length} {length} || color
我们为刚才的测试加上阴影
div.boxshadow{ -moz-box-shadow:0 0 5px #ccc; -webkit-box-shadow:0 0 5px #ccc; box-shadow:0 0 5px #ccc; }
圆角阴影测试
特性三:渐变--gradient
语法格式:
/* 渐变的类型? (linear) 渐变开始的X Y 轴坐标(0 0 – 或者left-top) 渐变结束的X Y 轴坐标(0 100% 或者left-bottom) 开始的颜色? (from(red)) 结束的颜色? (to(blue)) */ background:-webkit-gradient(linear,0 0, 0 100%,from(#bdd77d),to(#9cbc4d)); /* 请注意我们将渐变的类型——linear——放到了属性前缀中了 渐变从哪里开始? (top – 我们也可以使用度数,比如-45deg) 开始的颜色? (red) 结束的颜色? (blue) */ background: -moz-linear-gradient(top, #bdd77d, #9cbc4d);
圆角阴影渐变测试
特性四:文本阴影-text-shadow
语法格式:
/*X偏移,Y偏移,模糊半径,颜色*/ text-shadow : none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
我们给以上的测试文本加上阴影
text-shadow:-1px -1px 0 rgba(0 ,0 ,0, 0.3);
圆角阴影测试