网页设计应该熟知的CSS 3.0技术

2020-05-14 07:28:55易采站长站整理

#indie {
background-color: #000;
border: 1px solid #000;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}

注意到topright和top-left这两个值没有? 这表明的是圆角的方位,完整的方位书写出下:

以-moz为前缀的:topleft topright bottomleft bottomright
以-webkit为前缀的:top-left top-right bottom-left bottom-right

而且,你注意到了没,-moz为前缀的,是写在最后,而以-webkit前缀的,写在半径的前面。

4. 显示不透明度

css3.4.png

搞过透明没有, 很难搞,是不是?对,就是难搞,特别是IE(友情推荐:让IE支持PNG透明的最好方法)。而CSS3只要一行代码。如果浏览器都支持CSS 3,事情就好办多了。我们的代码如下:

#opacity {
background-color: #000;
opacity: 0.3;
}

再来一次英文解释吧,opacity,就是不透明度的意思。我想,只要知道这个,你就会用了吧?

5. CSS 投影

css3.5.png

你可能知道如何用CSS技巧来实现投影吧? 不过,这里要说的不是技巧,而是CSS 3的一个技术,看代码:

#shadow {
background-color: #fff;
border: 1px solid #000;
-webkit-box-shadow: 3px 5px 10px #ccc;
}

看到没,-webkit这一行,只要这一行。3px表示水平方向的投影,5px表示纵向投影,而10px而指模糊的跨度(使用过fireworks或者photoshop的feather功能没有? 对,就是这个!)。而且,像你看到的,-webkit为前缀,证明只有safari和chrome这样的浏览器才会显示,firefox则不会。

6. 调节大小

css3.6.png

用过safari的人都知道,一般情况下,textarea部分是可以调节大小的,就是这样。不过,这个功能现在也暂时只支持safari。代码如下:

#resize {
background-color: #fff;
border: 1px solid #000;
resize: both;
overflow: auto;
}

resize:both。像clear:both一样。表示,可以向水平方向和纵方向选择拖动,调节大小。当然,也支持下面的值:

resize:horizontal; 水平方向调作
resize:vertical; 纵向调节

而另一个要让你明白的是,你必须把overflow:auto;写上,才能保证Resize正常使用。当然,你还可以设定最长宽度,最低高度来让这个元素在可一个范围内可调节,知道下面这个不?