CSS可以通過box-shadow來實現發光的效果,下面我們就來演示一下如何用CSS制作帶有發光效果的圓形。
.circle { width: 100px; height: 100px; border-radius: 50%; /*將正方形變為圓形*/ background-color: #fff; /*設置圓形的背景顏色*/ box-shadow: 0 0 10px 5px #fff; /*添加發光效果*/ }
如上代碼,.circle類設置了圓形的寬度和高度為100px,并且將它的邊角半徑設置為50%,從而將正方形變為圓形。我們還設置了圓形的背景顏色為純白色。接下來我們通過添加box-shadow屬性來實現發光效果。
box-shadow屬性由四個關鍵字組成:水平偏移量、垂直偏移量、模糊半徑和陰影大小。下面是每個關鍵字的解釋:
- 水平偏移量:陰影相對于元素的左側的位置。
- 垂直偏移量:陰影相對于元素的頂部的位置。
- 模糊半徑:陰影的模糊半徑,值越大陰影越模糊。
- 陰影大小:陰影的大小。
在我們的代碼中,水平和垂直偏移量都是0,表示陰影在圓形的正下方。模糊半徑被設置為10px,所以陰影會變得比較模糊。陰影的大小被設置為5px,也就是陰影會超出圓形的邊界5px。
通過這個簡單的CSS代碼,我們就成功的實現了一個帶有發光效果的圓形,這個應用場景非常的廣泛,比如網頁設計、UI設計等等。我們只要根據需要修改圓的大小和顏色就可以應用到不同的場所。