使用CSS長方形怎么弄圓角?
以前我們實現圓角一般是用圖片或js實現,但是現在CSS3可以很方便的實現這一點。
要實現圓角,我們要使用border-radius屬性。這個屬性控制邊框的圓角大小。
語法如下:
```css
border-radius: [top-left] [top-right] [bottom-right] [bottom-left];
```
這里的值可以是長度,也可以是百分比。如果是百分比,那就是參考元素框的大小。
舉一個例子,如果要實現一個長寬為200px,圓角半徑為10px的矩形,可以這樣寫:
```css
div {
width: 200px;
height: 200px;
border-radius: 10px;
}
```
以上代碼可以看到,我們把border-radius設置為10px,這樣就形成了半徑為10px的圓角。如果要設置不同的圓角,可以這樣寫:
```css
div {
width: 200px;
height: 200px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
}
```
以上代碼可以看到,我們分別設置了四個角的半徑大小,這樣就實現了不同半徑大小的圓角效果。
我們還可以使用border-top-right-radius, border-bottom-left-radius和border-bottom-right-radius屬性替代border-radius,來分別控制某個角的圓角大小。
以上就是關于CSS長方形怎么弄圓角的方法介紹,希望對你有幫助。
網站導航
- zblogPHP模板zbpkf
- zblog免費模板zblogfree
- zblog模板學習zblogxuexi
- zblogPHP仿站zbpfang