关注前端开发
关注用户体验

CSS3详解:border-radius

讲到css3的border-radius这个玩意,可以很好玩。比如:圆角矩形,圆,椭圆等等。

CSS3 border-radius是什么?

border-radius的含义是:圆角。

CSS3 border-radius的书写格式:

border-radius:apx,比较常见,其中a表示数值,下同;

-webkit-border-top-left-radius:apx,类似这种的写法还是很实用的,但一定要记住顺序,一句话:先写Y轴,再写X轴

注意:上诉的-webkit-是兼容webkit内核的写法,-moz-内核的写法有所不同,如:-moz-border-radius-topleft:apx

下面我们通过几个实例演示说明border-radius的用法:

CSS3 border-radius 圆角矩形:

.demo01{
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

CSS3 border-radius 圆角矩形2:

.demo02{
-webkit-border-radius:36px;
-moz-border-radius:36px;
}

CSS3 border-radius 圆:

.demo03{
height:300px;
line-height:300px;
-webkit-border-radius:300px;
-moz-border-radius:300px;
}

CSS3 border-radius 漂亮圆角:

.demo04{
-webkit-border-top-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius-bottomright:20px;
}

CSS3 border-radius 椭圆:

.demo05{
height:300px;
-webkit-border-radius:180px;
-webkit-transform:rotatex(60deg);
}

能做的事情很多,更多技巧靠你发掘啦!

未经允许不得转载:大前端 » CSS3详解:border-radius
分享到:更多 ()

评论 12

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #5

    第一次看到这个属性,有意思.

    Jacse5年前 (2012-04-24)回复
  2. #4

    学习了,

    前端开发6年前 (2011-08-21)回复
  3. #3

    😮 哥们 努力抵制IE 6 吧

    satsun6年前 (2011-05-18)回复
  4. #2

    果然,ie9还是不支持~~

    qixun6年前 (2011-03-29)回复
    • 相比Chrome Firefox IE9 OUT 啦

      浩子6年前 (2011-03-29)回复
    • 😮 sadasdasdasda

      li6年前 (2011-05-14)回复
    • IE9支持的。标准语法。

      f6年前 (2011-08-11)回复
  5. #1

    为什么没有直接写一个border-radius呢,opera能认的,还有,我发现博主的文章大多很水,只是为了发文章而发文章,无意义。

    vimest6年前 (2011-03-05)回复
    • 嗯 没什么高级内容啊 我记得可以两个参数的啊 :mrgreen:

      15年前 (2011-11-01)回复
      • 人家那只是一個例子而已,自己不會去嘗試下??

        ice5年前 (2012-03-15)回复
        • 真心不懂这些人都没有好好看人家文章随便发评论

          Genesy5年前 (2012-07-17)

themebetter 国内更好的WordPress主题服务商

立即前往