在CSS中,我們可以通過border-radius屬性來讓某個位置的元素凸起,改變它的形狀,使其更加美觀。這個屬性可以給元素的邊框添加圓角。
.example { border-radius: 10px 10px 0 0; }
上面的代碼中,我們給一個名為example的元素添加了border-radius屬性,其中左上角和右上角的圓角半徑為10像素,而左下角和右下角沒有設置,因此為0。這個例子就會讓example元素的上方變成一個弧形的形狀,看起來就像是凸起來了。
border-radius屬性還有其他的寫法,比如只給一個值,或者只給兩個值。這些值都可以用來制作出各種不同的效果。比如:
.box { border-radius: 50%; } .example { border-radius: 0 10px 0 0; }
上面的代碼中,我們?yōu)閮蓚€不同的元素添加了border-radius屬性。在第一個例子中,我們使用50%作為值,這將使元素的四個角以及四個邊都變成半圓形,看起來就像是一個圓形。而在第二個例子中,我們只設置了左上角的圓角半徑為10像素,這將使該元素的左上角變成一個弧形,看起來就像是一個向上凸起的三角形。