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

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);
}

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

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

评论 13

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

    Fantastic goods from you, man. I’ve understand your stuff previous to and you’re just extremely excellent. I really like what you’ve acquired here, certainly like what you are stating and the way in which you say it. You make it enjoyable and you still care for to keep it sensible. I can’t wait to read much more from you. This is actually a great website.

  2. #5

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

    Jacse7年前 (2012-04-24)回复
  3. #4

    学习了,

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

    😮 哥们 努力抵制IE 6 吧

    satsun8年前 (2011-05-18)回复
  5. #2

    果然,ie9还是不支持~~

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

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

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

      f8年前 (2011-08-11)回复
  6. #1

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

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

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

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

          Genesy7年前 (2012-07-17)

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

立即前往