在CSS中,我們可以使用border-radius
屬性來設置一個圓角矩形框,這個屬性可以接收四個值,分別代表四個角的圓角程度,每個值可以是像素、百分比或者em等長度單位。
如果我們想要一個圓角矩形框,每個角都是10像素的圓角,我們可以這樣寫CSS代碼:
.rounded-rectangle { width: 200px; height: 100px; border: 2px solid #000; border-radius: 10px; }
這段代碼會創(chuàng)建一個寬度為200像素、高度為100像素的圓角矩形框,邊框寬度為2像素,顏色為黑色,每個角都是10像素的圓角。
如果我們想要設置不同的圓角程度,我們可以分別指定四個角的圓角程度,如果我們想要左上角是5像素的圓角,右上角是15像素的圓角,左下角是25像素的圓角,右下角是35像素的圓角,我們可以這樣寫:
.rounded-rectangle { width: 200px; height: 100px; border: 2px solid #000; border-radius: 5px 15px 25px 35px; }
這段代碼會創(chuàng)建一個寬度為200像素、高度為100像素的圓角矩形框,每個角的圓角程度都不同。
版權聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉載時請以鏈接形式注明文章出處。