在CSS中,要畫出一個相交的圓,我們可以使用border-radius和box-shadow屬性來實現。
.intersecting-circles { width: 200px; height: 200px; border-radius: 50%; background: #ccc; box-shadow: 50px -50px #fff, -50px 50px #fff; }
代碼中,我們首先定義一個寬高相等的容器,然后將border-radius屬性設置為50%,即可畫出一個圓形的容器。接著,我們設置了一個背景色為灰色的圓。
接下來,我們使用box-shadow屬性來畫出交叉的圓。box-shadow屬性可以設置多個值,它們之間用逗號隔開。每個值又包含了水平偏移量、垂直偏移量、模糊半徑和顏色值四個屬性。
在這個例子中,我們設置了兩個box-shadow值,分別為"50px -50px #fff"和"-50px 50px #fff"。第一個值表示水平偏移量為50px,垂直偏移量為-50px,模糊半徑為0,顏色為白色;第二個值表示水平偏移量為-50px,垂直偏移量為50px,模糊半徑為0,顏色為白色。
這樣設置后,我們就可以得到一個交叉的圓形效果。