CSS3 实现圆角方法

最新推荐文章于 2024-07-26 08:00:00 发布

Molly_Yuan

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量685

点赞数

分类专栏： CSS 文章标签： css chrome div 工作

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

大家也知道，CSS3将可能在明年就正式的加入到了我们的设计中，而这篇教程也是来自国外，原文链接。这里只是稍微的翻译下，希望大家能够从中领悟。

圆角效果，首先我们应该来创建一个DIV和简单的CSS吧。

<body>
<div id="box"></div>
</body>

在CSS中，我们应该给他定义一个宽度和高度，当然还有背景。

#box {
width:590px;
height:100px;
background-color:#6B86A6;
｝

好了，准备工作都已经就绪了，那么我们就开始做圆角吧，其实很简单。

1.对4个角都设置。

#box { -moz-border-radius: 20px; }

2.这种情况比较特殊，是对左上角和右下角设置同一种圆角，而右上角和左下角是同一种圆角。

#box { -moz-border-radius:20px 40px; }

3.这种情况也比较特殊，是左上角为20px的圆角，右上和左下是40px的圆角，而右下则是5px的圆角。

#box { -moz-border-radius:20px 40px 5px; }

4.这种情况则比较规则，则是右上、右上、右下、左下依次是10px/20px/30px/40px的圆角。

#box { -moz-border-radius:10px 20px 30px 40px; }

5.分别控制4个位置的圆角。

-moz-border-radius-topleft for the top-left corner;
-moz-border-radius-topright for the top-right corner;
-moz-border-radius-bottomright for the bottom-right corner;
-moz-border-radius-bottomleft for the bottom-left corner;

#box { -moz-border-radius-topright: 30px; }

#box { -moz-border-radius-topleft: 30px; }

#box { -moz-border-radius-topleft: 30px 15px; } 这种情况很特别，也就是会自动计算。一般不是会用到。

6.分别控制上边的2个位置和下面的2个位置。

#box { -moz-border-radius: 30px / 15px; }

#box { -moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }

7.Safari和Chrome的hack。

#box { -webkit-border-radius: 10px 20px 30px 40px; } 大家应该看的懂吧。有规律的那种

#box {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 40px; } 控制各个位置

#box { -webkit-border-top-left-radius: 30px 15px; }

#box { -webkit-border-radius: 30px 15px; } 这种需要注意，没有了“/”

好了，其实也真的很简单，比原来用图片来代替的过程不知道容易了多少。简单翻译结束。

Molly_Yuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 实现圆角方法

大家也知道，CSS3将可能在明年就正式的加入到了我们的设计中，而这篇教程也是来自国外，原文链接。这里只是稍微的翻译下，希望大家能够从中领悟。圆角效果，首先我们应该来创建一个DIV和简单的CSS吧。在CSS中，我们应该给他定义一个宽度和高度，当然还有背景。#box { width:590px; height:100px;
复制链接

扫一扫

专栏目录