border邊框弧度,css中如何將圖片邊緣設置弧度?
1新建一個html文件,命名為test.html,用于講解在css中怎樣讓邊角具有弧度。
2在test.html文件內,使用div標簽創建一個模塊,用于設置弧度。
3在test.html文件內,設置div的class為bb,主要用于下面通過該class來設置css樣式。
4在test.html文件內,編寫<style type="text/css"></style>標簽,頁面的css樣式將寫在該標簽內。
5在css標簽內,通過類名bb對div進行樣式設置,使用width屬性設置div的寬度為300px,使用height屬性設置div的高度為300px,使用background屬性設置div背景顏色為灰色。
6在css標簽內,再使用border-top-left-radius屬性設置div左上角的弧度為8px,使用border-top-right-radius屬性設置div右上角的弧度為20px,使用border-bottom-right-radius屬性設置div右下角的弧度為30px,使用border-bottom-left-radius屬性設置div左下角的弧度為60px。
7在瀏覽器打開test.html文件,查看實現的效果。
總結:
1、創建一個test.html文件。
2、在文件內,創建一個div模塊。
3、在css樣式中,設置div的寬度和高度,使用border-top-left-radius屬性設置div左上角的弧度,使用border-top-right-radius屬性設置div右上角的弧度,使用border-bottom-right-radius屬性設置div右下角的弧度,使用border-bottom-left-radius屬性設置div左下角的弧度。
css怎么設置塊的角弧度?
border-radius:該CSS屬性是為一個div設置弧度值。border屬性,CSS3提供了四個單獨的屬性:(可以實現弧度的轉換)
border-top-left-radius為左上角設置弧度值。border-top-right-radius為右上角設置弧度值。border-bottom-left-radius為左下角設置弧度值。border-bottom-right-radius為右下角設置弧度值。
例如設置:border-top-left-radius: 15px;見效果:可見只有左上角具有了px的弧度。