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

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)

评论 20

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

    I am only writing to let you be aware of what a excellent discovery my cousin’s girl developed using your blog. She even learned a lot of details, not to mention what it’s like to possess a marvelous helping spirit to have most people effortlessly know specific grueling subject matter. You really surpassed my desires. I appreciate you for presenting these effective, dependable, revealing not to mention fun tips on that topic to Lizeth.

  2. #12

    I consider something really interesting about your site so I bookmarked .

  3. #11

    You got a very wonderful website, Glad I detected it through yahoo.

    na blogu autora1周前 (05-15)回复
  4. #10

    Substantially, the post is actually the greatest on that worthw hile topic. I harmonise with your conclusions and also will certainly thirstily look forward to your coming updates. Simply saying thanks definitely will not just be adequate, for the extraordinary lucidity in your writing. I can immediately grab your rss feed to stay abreast of any updates. Fabulous work and much success in your business enterprize!

    Nonton Anime2周前 (05-10)回复
  5. #9

    there are many different operating systems but of course i would still prefer to use linux for stability”

    cat products2周前 (05-09)回复
  6. #8

    I wish to get across my admiration for your kindness in support of those people that really want help on the area. Your personal commitment to getting the solution all around had been remarkably functional and has regularly allowed people just like me to get to their goals. Your personal warm and helpful instruction implies much to me and especially to my peers. Best wishes; from everyone of us.

    ultra boost3周前 (05-02)回复
  7. #7

    I must appreciate your time and efforts you earn in publishing this blog post. I hope the identical best article by you later on also. Actually your creative writing expertise has encouraged me to start my very own blog site now. Actually the blogging is spreading its wings quickly. Your article is a fine style of it.

    my singing monsters2个月前 (03-28)回复
  8. #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.

    Darren Cangialosi2个月前 (03-11)回复
  9. #5

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

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

    学习了,

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

    😮 哥们 努力抵制IE 6 吧

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

    果然,ie9还是不支持~~

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

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

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

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

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

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

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

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

          Genesy7年前 (2012-07-17)

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

立即前往