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

圆角阴影测试