当前时间:Saturday 2018年02月24日 欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

当前位置: 首页 >> Web前端 >> 正文

CSS3 实现圆角方法

border-radius

大家也知道。CSS3将可能在明年就正式的加入到了我们的设计中,而就如我上次给大家介绍的CSS3 PDF一样,这次更新带来了很多新的革命,虽然还有一些是我们不知道的,但是在国外已经有朋友公布了很多教程,而这篇教程也是来自国外,原文链接。我也只是稍微的翻译下,希望大家能够从中领悟。

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

  1. <body>
  2. <div id=”box”></div>
  3. </body>

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

  1. #box {
  2.    width:590px;
  3.    height:100px;
  4.    background-color:#6B86A6;
  5.    }

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

1.对4个角都设置。

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

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

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

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

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

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

  1. #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;

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

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

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

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

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

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

7.Safari和Chrome的hack。

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

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

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

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

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

作者:夜阑小雨
原文链接:CSS3 实现圆角方法
夜阑小雨版权所有,转载本网站文章时请保留此信息。

收藏和分享: 转贴到开心网 转贴到校内网 分享到 Twitter Delicious 分享到 Google Reader 分享到 百度收藏 分享到 QQ收藏

所在分类:Web前端

评论信息

0 条评论 发表评论

发布评论

您必须登录才能发表评论。

网站客户端下载