如果你想在網(wǎng)頁中添加凹陷半圓效果,可以使用CSS實(shí)現(xiàn)。這里是一個(gè)簡單的例子:
.half-circle { width: 100px; height: 50px; background-color: #333; border-radius: 0 0 50px 50px; transform: skewY(-10deg); }
首先,我們創(chuàng)建了一個(gè)類名為“half-circle”的元素,并設(shè)置它的寬度和高度。然后,我們?cè)O(shè)置了它的背景顏色為深灰色,因?yàn)槲覀兿胍粋€(gè)黑色的凹陷半圓。
接著,我們使用了“border-radius”屬性來制作半圓形,但它只在下半部分工作。我們?cè)O(shè)置了前兩個(gè)角的值為0,而后面兩個(gè)角的值為50px,這樣就形成了一個(gè)凹陷半圓。如果你將這兩個(gè)角的值設(shè)置為相同的數(shù)值,那么你將得到一個(gè)完整的圓形。
最后,我們使用“transform: skewY(-10deg);”來傾斜下半部分。這會(huì)使半圓凹陷的效果更加真實(shí)。你可以根據(jù)需要調(diào)整傾斜的角度,或者將其省略。
可以使用類名來調(diào)用這個(gè)樣式,例如:“<div class="half-circle"></div>”。你也可以使用其他標(biāo)簽,如“<span>”等等。你只需要將寬度和高度設(shè)置為適當(dāng)?shù)闹怠?/p>
下一篇css凹陷陰影