CSS中的鏤空圓是一種很常用的樣式,實現這種效果有多種方法,本文將會介紹如何使用CSS實現圓形鏤空的效果。
.round { width: 100px; height: 100px; border-radius: 50%; box-shadow: inset 0 0 0 20px #fff; }
上面的代碼中,我們首先將元素的width和height設置為100px,這樣元素就變成了一個正方形,接著我們給它加上圓角邊框,border-radius:50%就可以實現這種效果了。
接下來要實現鏤空的效果,我們需要使用box-shadow屬性。box-shadow可以創建一個或多個投影,我們在這里只需要創建一個內陰影(inset)投影即可。記得給陰影設置一個合適的模糊距離,使它看起來更加真實。
運行上面的代碼,你將會看到一個白色的圓。如果你想將它變成一個鏤空的效果,只需要將白色改為透明就可以了。
.round { width: 100px; height: 100px; border-radius: 50%; box-shadow: inset 0 0 0 20px transparent; }
現在你已經掌握了如何使用CSS創建一個鏤空圓的方法了,如果你想讓它更加美觀可愛,可以給它添加一些動畫效果或者樣式變換。
上一篇mysql概念的理解
下一篇css 鏈接 dw