你需要熟知10个的CSS3属性

发布时间:2013-3-27浏览:

核心提示:你需要熟知10个的CSS3属性

前面我已经介绍过了30个应该记住的CSS选择器,那么新的CSS3又有哪些新属性呢?虽然大多数需要特定的前缀,但你仍然可以在你的项目中使用它,其实上我也鼓励大家这么做。

关键是首先确定你是否对各个浏览器之间的细微的差别有所了解,你能肯定的说IE显示的90度的角就不圆滑嘛?这取决于你的决定。但是要永远记住,网站设计不必看到所有浏览器的不同。在文章的最后,我们将显示一个有趣的最终的案例。

1、border-radius

演示

 

border-radius是一大堆CSS3属性中最受欢迎的一种,border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。

我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上时,他们却又不这么认为。

-webkit-border-radius: 4px;  
-moz-border-radius: 4px;  
border-radius: 4px;

注意:请在Safari 5 和 IE9浏览器中执行”border-radius”语法。

许多读者也许不会意识到我们可以用这个属性来做一个圆。

-moz-border-radius: 50px;  
-webkit-border-radius: 50px;  
border-radius: 50px; 

演示

 

如果想再添加点效果,我们可以利用Flexible Box Model(详情在8中)来使得文字在垂直在水平方向都居中。这需要加点代码,但这仅仅是对不同浏览器的补偿。

display: -moz-box;  
display: -webkit-box;  
display: box;  
-moz-box-orient: horizontal; 
/* the default, so not really necessary here */ 
-webkit-box-orient: horizontal;  
box-orient: horizontal;  
-moz-box-pack: center;  
-moz-box-align: center;  
-webkit-box-pack: center;  
-webkit-box-align: center;  
box-pack: center;  
box-align: center;
 

2、box-shadow

演示

 

接下来是非常普遍的box-shadow,可以使你的元素立即美化,只是记得不要把值设得太离谱

-webkit-box-shadow: 1px 1px 3px #292929;  
-moz-box-shadow: 1px 1px 3px #292929;  
box-shadow: 1px 1px 3px #292929; 

box-shadow的四个参数

 

x-offset  x 轴偏移                       
y-offset y轴偏移
blur 模糊值
color of shadow 阴影颜色

 

现在,许多人不知道可以一次运用多个box-shadows,这样做会产生一些有趣的效果。在下图中,我使用蓝色和绿色阴影来放大一下效果。


演示

webkit-box-shadow: 1px 1px 3px green, -1px -1px blue; 
-moz-box-shadow: 1px 1px 3px green,-1px -1px blue; 
box-shadow: 1px 1px 3px green, -1px -1px blue;

Clever Shadows

The CSS

.box:after {  
content: ’’;  
position: absolute;  
z-index: -1; /* hide shadow behind image */ 
/* The Shadow */ 
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);  
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);  
-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);  
width: 70%;  
left: 15%; /* one half of the remaining 30% (see width above) */ 
height: 100px;  
bottom:  0;  
}


前一篇:定做程序设计
后一篇:多栏自适应布局问题浅谈
分享到: