在CSS中,可以使用border-radius
屬性來(lái)讓元素的邊緣變圓,這個(gè)屬性可以設(shè)置一個(gè)元素的四個(gè)角的半徑,或者分別設(shè)置每個(gè)角的半徑。
如果想要讓一個(gè)元素的邊緣變圓,可以將其border-radius
屬性設(shè)置為一個(gè)非零的值,例如10px
:
div { border-radius: 10px; }
這將會(huì)使div
元素的四個(gè)角變?yōu)榘霃綖?code>10px的圓,如果想要分別設(shè)置每個(gè)角的半徑,可以傳遞四個(gè)值給border-radius
屬性,
div { border-radius: 10px 20px 30px 40px; }
這將會(huì)使div
元素的四個(gè)角變?yōu)椴煌霃降膱A,***個(gè)值設(shè)置左上角的半徑,第二個(gè)值設(shè)置右上角的半徑,第三個(gè)值設(shè)置右下角的半徑,第四個(gè)值設(shè)置左下角的半徑。
如果想要讓元素的邊緣更加圓滑,可以使用box-shadow
屬性來(lái)添加一些陰影效果:
div { border-radius: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
這將會(huì)使div
元素的邊緣更加圓滑,并添加一些陰影效果,使其看起來(lái)更加立體。