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

3. 单独圆角的定义

看了上面的CSS圆角，你可能会觉得，如果我想让它只显示两个三个圆角，需要怎么办呢，难道还是要用到制图工具? 当然不用，CSS3已经为我们想好了。这里，我们的代码将是：

#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. 显示不透明度

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

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

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

5. CSS 投影

你可能知道如何用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. 调节大小

用过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正常使用。当然，你还可以设定最长宽度，最低高度来让这个元素在可一

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!