1. <p id="ijjhg"></p>
      <acronym id="ijjhg"></acronym>

    2. <p id="ijjhg"></p>
      <table id="ijjhg"><ruby id="ijjhg"><mark id="ijjhg"></mark></ruby></table>
      0712-2888027 189-8648-0214
      微信公眾號

      孝感風信網絡科技有限公司微信公眾號

      當前位置:主頁 > 技術支持 > HTML5/CSS3 > CSS3 圓角屬性(border-radius)

      CSS3 圓角屬性(border-radius)

      時間:2024-07-07來源:風信官網 點擊: 622次

      前綴

      • -moz(例如 -moz-border-radius)用于Firefox
      • -webkit(例如:-webkit-border-radius)用于Safari和Chrome。

       

      例1

      <div id="round"></div>
      #round {
          padding:10px; width:300px; height:50px;
          border: 5px solid #dedede;
          -moz-border-radius: 15px;      /* Gecko browsers */
          -webkit-border-radius: 15px;   /* Webkit browsers */
          border-radius:15px;            /* W3C syntax */
      }

      效果:
      CSS圓角

       

      例2:無邊框

      <div id="round"></div>  
      #round {
          padding:10px; width:300px; height:50px;
          background:#FC9; 
          -moz-border-radius: 15px;
          -webkit-border-radius: 15px;
          border-radius:15px;
      }

      效果:
      CSS圓角

       

      書寫順序

      /* Gecko browsers */
      -moz-border-radius: 5px; 
      /* Webkit browsers */
      -webkit-border-radius: 5px; 
      /* W3C syntax - likely to be standard so use for future proofing */
      border-radius:10px;

       

      其它

      支持上、右、下、左

      border-radius:5px 15px 20px 25px;

      支持拆分書寫

      /* Gecko browsers */
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-topright: 0;
      -moz-border-radius-bottomleft: 0;
      -moz-border-radius-bottomright: 20px;
       
      /* Webkit browsers */
      -webkit-border-top-left-radius: 20px;
      -webkit-border-top-right-radius: 0;
      -webkit-border-bottom-left-radius: 0;
      -webkit-border-bottom-right-radius: 20px;
       
      /* W3C syntax */
      border-top-left-radius: 20px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius:  20px;

       

      支持性

      瀏覽器 支持性
      Firefox(2、3+)
      Google Chrome(1.0.154+…)
      Google Chrome(2.0.156+…)
      Safari(3.2.1+ windows)
      Internet Explorer(IE7, IE8) ×
      Opera 9.6 ×
      熱門關鍵詞: CSS3 圓角屬性 border-radius
      欄目列表
      推薦內容
      熱點內容
      展開
      中文字幕第二页在线天堂中文_中文字幕制服丝袜在线观看_美女胸禁止18以下看免费国产_中日韩人妻一级毛片