CSS div rounded corners

后端 未结 5 933
孤城傲影
孤城傲影 2021-02-06 05:51

I\'m attempting to do the following...

Here\'s what I\'ve got right now.. but it\'s not rendering correctly. Does anyone have any idea as to how I\'d fix this?

相关标签:
5条回答
  • 2021-02-06 06:19

    A fantastic summary for all major browsers, telling you how to round each corner or all corners:

    http://perishablepress.com/press/2008/11/24/perfect-rounded-corners-with-css/

    0 讨论(0)
  • 2021-02-06 06:20

    Instead just put this code in the class where you want to have rounded corners .it will definitely work.

    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    
    0 讨论(0)
  • 2021-02-06 06:23

    Can be done easily with jQuery rounded corners rounded_corner

     $(document).ready(function(){
       $("#b1").corner();
     });
    

    You don't need to worry about cross browser issues with jQuery approach.

    0 讨论(0)
  • 2021-02-06 06:36

    Instead I suggest you use CSS3, which unlike other methods, does not require extraneous HTML or Javascript markup that notoriously causes any rounded element to 'flash' upon page load.

     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     -o-border-radius: 10px;
     -ms-border-radius: 10px;
     -khtml-border-radius: 10px;
     border-radius: 10px;
    

    This generator is also helpful: http://borderradius.com/ and there is another one at http://css3generator.com

    In the newest versions of most (if not all) browsers border-radius: 10px; works just fine, and within due time, the browser specific declarations will be obsolete.

    To make border radius work in IE6, 7 and 8, try ms-border-radius js library, though I have not tested it (and somebody has responded that it does not work.) My personal opinion is that if anybody is still using these browsers, the internet must look like a strange and scary place to them on the daily, and thus, they will not miss their rounded corners.

    Aside: The method you are trying to use was more applicable when CSS3 was not as widely supported. It was created during a strange period of the Internet when the popularity of IE6 drove countless web developers to find highly non-semantic creative solutions to otherwise simple problems. So thank you Internet Explorer for taking a few years off all of our lives and slowing the progression of web design and development.

    0 讨论(0)
  • 2021-02-06 06:39

    There's always curvycorners as well, it uses native css for speed if the browser supports it or falls back to javascript if the browser doesn't.

    0 讨论(0)
提交回复
热议问题