這篇文章主要介紹css圓角屬性的使用方法,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比尚義網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式尚義網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋尚義地區(qū)。費用合理售后完善,十載實體公司更值得信賴。css圓角屬性是border-radius,通過該屬性我們可以給任何元素制作圓角,例如【border-radius: 15px 50px 30px 5px】。如果我們在border-redius屬性中只指定一個值,那么將生成四個圓角。
圓角屬性即 border-radius 屬性,通過該屬性我們可以給任何元素制作 "圓角"。
border-radius 所有四個邊角 border-*-*-radius 屬性的縮寫 border-top-left-radius 定義了左上角的弧度 border-top-right-radius 定義了右上角的弧度 border-bottom-right-radius 定義了右下角的弧度 border-bottom-left-radius 定義了左下角的弧度
如果你在 border-radius 屬性中只指定一個值,那么將生成 4 個 圓角。
但是,如果你要在四個角上一一指定,可以使用以下規(guī)則:
四個值: 第一個值為左上角,第二個值為右上角,第三個值為右下角,第四個值為左下角。
三個值: 第一個值為左上角, 第二個值為右上角和左下角,第三個值為右下角
兩個值: 第一個值為左上角與右下角,第二個值為右上角與左下角
一個值: 四個圓角值相同
以下為三個實例:
1、四個值 - border-radius: 15px 50px 30px 5px:
2、三個值 - border-radius: 15px 50px 30px:
3、 兩個值 - border-radius: 15px 50px:
代碼示例:
#rcorners4 { border-radius: 15px 50px 30px 5px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners6 { border-radius: 15px 50px; background: #8AC007; padding: 20px; width: 200px; height: 150px; }
以上是css圓角屬性的使用方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!