文章内容
2016/12/29 12:56:22,作 者: 黄兵
CSS3圆角效果
圆角效果可是几年前Web 2.0 网页的招牌式设计。当时，实现简单的圆角要用复杂的JavaScript，
或者得用嵌套的DIV 和丝毫不差的图片定位。而现在，则只要一行CSS 就能搞定了。
最简单语法形式如下。
border-radius:10px;
这样，盒子的四角都会变成半径为10 像素的圆角。
如果要单独设定每个角的半径，也可以在上面的简写属性中按顺序依次指定。只不过，现在指
定的是角而不是边，所以“上、右、下、左”的顺序就不适用了，而是要改用“左上、右上、
右下、左下”。
另外，也可以像下面这样分别设定水平和垂直半径：
border-radius:10px / 20px;
如果你想给每个角都设定不同的水平和垂直半径，写法如下：
border-radius:10px 6px 4px 12px / 20px 12px 8px 24px; /* 4 个水平值，4 个垂直值 */
最后提醒大家，弧形角不一定要通过边框才能显示出来。大家看到图7-1 中的菜单了吗，菜单
的圆角就是通过元素的背景色而非边框显现出来的。
评论列表