当前位置: 首页 > 前端笔记 > CSS > CSS3现在用得广泛比较多的几个属性
2014年24七月

CSS3现在用得广泛比较多的几个属性

如果你看不到效果,请更换浏览器(Chrome、火狐或者IE10以上)再看!

第一个当之无愧的是圆角:

 
<div style="border:10px #dddddd solid; border-radius:2px; height:60px;"></div> 

圆角的大小,对应的规则是“上右下左”,如border-radius:10px 20px 30px 40px;

不管你用的多不多,反正我用的挺多。对于不支持的浏览器显示成直角也没有多大的关系。

第二个就是动画,我经常用在hover上:

我要去首页

.css3-home { display:block; background:#dddddd; text-decoration:none; text-align:center; padding:10px 0; color:#222222; transition:background 300ms, color 300ms; }
.css3-home:hover { background:#669900; color:#ffffff; }

比直接切换背景流畅多了。同样不支持的浏览器,大不了回到原来的时代,也没多大关系。

transition:background 300ms, color 300ms; 是表示多个效果切换,可以根据需要设置。

第三个是渐变,我一般使用线性渐变:

我就是一个渐变!
background:linear-gradient(to bottom,#669900,#2f7ce3); 
background:-webkit-gradient(linear,0 0,0 bottom,from(#669900),to(#2f7ce3));

为什么有2个background呢?记得在做商城HTML5版本的时候,只用了前面一个,但是在Safari下,渐变背景出不来,只能补充上后面的就可以了。

相对前面2个来说,渐变用得就少很多,对于大多数前端来说,用一张背景既省事,兼容性又好。但是现在的html5风潮来说,既然代码能搞定的,那一定是要尝试尝试的了。

文章信息

  • 发布日期:2014年07月24日 23:22:53
  • 固定地址:http://www.estorm.cn/notes/css/2014-07-24/css3-radius-transition-gradient.html