您的位置:知识库 » Web前端

CSS3中边框相关的特性

作者: caixw  发布时间: 2010-09-05 13:16  阅读: 1301 次  推荐: 0   原文链接   [收藏]  

1.圆角 border-radius

CSS2中的圆角只能通过比较特殊的方法或是图片实现,在CSS3中终于可以直接使用了。指令为:

1 border-radius: width;

width表示四个圆角的水平半径。目前这还只是个草案,并非实际标准,所以直接用border-radius浏览器还是不能识别的,对于这种实现各浏览器都会加上各自的标记,Firefox为-moz-border-radius,webkit内核的为-webkit-border-radius而IE8和Opera貌似还不支持这个属性。
有时候指定某一个角为圆角也很有用,所以又有了以下四个类型(恩,这回moz和webkit命名有点不一样):

1 /* moz */
2 -moz-border-radius-topleft: /* 左上角 */
3 -moz-border-radius-bottomleft: /* 左下角 */
4 -moz-border-radius-topright: /* 右上角 */
5 -moz-border-radius-bottomright: /* 右下角 */
6
7  /* webkit */
8 -webkit-border-top-left-radius: /* 左上角 */
9 -webkit-border-bottom-left-radius: /* 左下角 */
10 -webkit-border-top-right-radius: /* 右上角 */
11 -webkit-border-bottom-right-radius: /* 右下角 */

 

示例:四个圆角。如果看到了圆角,说明你的浏览器支持这一特性。
border:5px solid gray;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:10px;

 

示例:底部两个圆角。如果看到了,说明你的浏览器支持这一特性。
border:5px solid gray;
-moz-border-radius-bottomleft:25px;
-moz-border-radius-bottomright:40px;
-webkit-border-bottom-left-radius:25px;
-webkit-border-bottom-right-radius:40px;
padding:10px;



示例:textarea或input的圆角 在firefox中若要指定textarea或input的圆角, 不能将border-style高为none。 border:5px solid gray; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:10px;

2.边框渐变:border-colors

这个可以用来指定边框的渐变颜色,当你指定的边框的值为5px时,那么你在这个border-color中指定5种颜色的话,每一种颜色就显示为1px的宽度,若只指定了4种颜色,则最后指定的颜色将填充剩下的宽度。当然,相对应的也有相对于四条边的语法。

1 border-colors: color1 color2...
2 border-top-colors:
3 border-right-color:
4 border-bottom-colors:
5 border-left-colors:
示例:左边和顶部边框渐变效果。
目前貌似只有Firefox3.5以上版本才实现此特性。
border: 10px solid #000;
-moz-border-left-colors:#000 #111 #222 #333 #444 #555 #666 #777 #888 #999;
-moz-border-top-colors:#fff #eee #999 #888 #777 #666 #333 #222;
padding:10px;

3.阴影:box-shadow

语法为:

1 box-shadow:length length length color

值分别为:阴影水平偏移量、阴影垂直偏移量、阴影模糊值、阴影颜色。

示例:阴影效果:
-webkit-box-shadow:5px 2px 6px #000;
-moz-box-shadow:5px 2px 6px #000;
padding:10px;

4. border-image

这个类似于background,只不过这个用于边框的。语法为:

1 border-image:

由于网站上没图片,也懒得弄效果图了。用过background的都应该知道怎么用。

0
0
 
标签:CSS3 边框

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻