您当前的位置首页/HTML/ 正文

前端开发人员必须熟悉的10个CSS3属性(上)

good 最后更新时间 2017-08-30 09:56:19   80浏览
随着Css3和html5的风靡,越来越多的前端人员开始学习Css3,今天的文章就是来说说前端应该掌握10个Css3属性。

        对于Css3的新属性,你又了解多少呢?虽然大多数的css3属性在很多流行的浏览器中不支持,但是我们鼓励在前端开发中要学会并且运行这些css3属性,因为这是未来的趋势。

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

1. Border-radius


        Border-radius是一大堆CSS3属性中最受欢迎的一种,border-radius是CSS3中级别最高的一个属性。当设计者害怕一个层在将在不同的浏览器之间以不同的方式显示时,CSS圆角,一个很初级的知识,将引导他们开始学习。 我们为移动浏览器提供一个备用的观看体验的想法都非常好。奇怪的是,当这种方法出现在桌面浏览器上时,他们却又不这么认为。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;
-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

   Tuts



The CSS
.box:after {
   content: '';
   position: absolute;


   z-index: -1;


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


   height: 100px;
   bottom:  0;
}





3. Text-shadow
        Text-shadow是我们可以省略前缀的几个CSS属性之一,类似的还有box-shadow,它必须应用于文本,并它们有相同的四个参数:
[list=1][*]x-offset 水平位移
[*]y-offest 垂直位移
[*]blur 模糊值
[*]color of shadow 阴影颜色
[*][/list][size=12px]h1
{
    text-shadow: 0 1px 0 white;
    color: #292929;
}

[size=12px]

[size=12px]Text-Outline和box-shadow一样,它可以设置多个阴影通过逗号分隔符。例如,我们创建文本框的轮廓,当Webkit不支持stroke效果,我们可以使用下面的代码让更多的浏览器支持(虽然不是很美观)。

[size=12px]body { background: white; }

[size=12px]h1
[size=12px]{
[size=12px]   text-shadow: 0 1px 0 black, 0 -1px 0 black, 1px 0 0 black, -1px 0 0 black;
[size=12px]   color: white;
[size=12px]}

[size=12px]

[size=12px]4. Text-Stroke
[size=12px]

[size=12px]使用这个方法时要注意了,只有Webkit(Safari, Chrome, iPhone)在最后的几年内还支持这个属性。其实,虽然我可能是错的,Text-stroke还不属于CSS3范畴的一部分。在这种情况下,使用白色字体时,Firefox会显示一个空白页面。要解决此问题,你即可以使用Javascript,也可以通过使用一种不同于背景颜色的文字颜色。

[size=12px]h1 {
[size=12px]   -webkit-text-stroke: 3px black;
[size=12px]   color: white;
[size=12px]}
[size=12px]

[size=12px]Feature Detection我们如何为firefox提供一组可用的样式,和为另外的一组Safari或Chrome?解决办法就是多做测试。 通过feature detection,我们可以利用JavaScript来测试某属性是否可用,如果不行,我可 就要采用备用的。 再回到text-stroke的问题上,为不支持此属性的浏览器设定一个备用黑色(目前的除webkit外)。

[size=12px]var h1 = document.createElement('h1');
[size=12px]if ( !( 'webkitTextStroke' in h1.style ) ) {
[size=12px]   var heading = document.getElementsByTagName('h1')[0];
[size=12px]   heading.style.color = 'black';
[size=12px]}
[size=12px]

[size=12px]首先我们设定一个h1元素,然后执行,通过样式属性以确定-webkit-text-stroke是否支持此元素。如果不支持,我们会把标题由白色 设置成黑色。

5. Multiple Backgrounds


[size=12px]

[size=12px]Background属性在CSS3样式中已经彻底改革,开始支持多背景图片。 举个简单的例子,如果没和合适的图像,我们将使用两个教程的图像作为我们的背景,当然在程序中你可能会用纹理,也许是渐变作为图像。

.box {
background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}


以上,通过逗号分隔符,插入了两张背景图像,第一个的定位是(0,0),第二个的定位是(100%,0)。 要确定你对不支持的浏览器使用了备用图片,否则,它将跳此属性,使背景图像留空。 对旧浏览器的补偿要添加一张单独的图像给老浏览器用,像IE7。要定义两遍background,一遍是为老浏览器,另一遍是重写。或者你可以再次查看下Modernizr。

.box {

background: url(image/path.jpg) no-repeat;



background: url(image/path.jpg) 0 0 no-repeat,
url(image2/path.jpg) 100% 0 no-repeat;
}


文章来源:http://www.iwanna.cn/archives/2011/01/03/6182/