CSS3是當前前端開發中必備的一項技能,其中div發光也是一個很常見的技巧。使用CSS3的box-shadow屬性,輕松實現div的發光效果。
div { /* 添加box-shadow屬性 */ box-shadow: 0 0 15px #fff; /* 可以添加多個box-shadow來實現不同的效果 */ box-shadow: 0 0 15px #fff, 0 0 20px #fff, 0 0 25px #fff; /* 如果想要實現內部發光效果,可以使用inset關鍵字 */ box-shadow: inset 0 0 15px #fff; }
box-shadow屬性的作用是給元素添加邊框陰影效果,其語法為:
box-shadow: [水平偏移量] [垂直偏移量] [模糊半徑] [擴張半徑] [顏色] [投影方式];
其中,水平偏移量和垂直偏移量作用于陰影的位置;模糊半徑是指陰影的顏色的模糊程度;擴張半徑是指陰影的大小,可以為負值表示陰影在元素內部;顏色指定陰影的顏色,可以為rgba格式;投影方式包括outset和inset,分別指元素外部和內部添加陰影。
可以根據需要,自定義屬性值來實現不同的發光效果。
本文簡要介紹了使用CSS3的box-shadow屬性來實現div發光效果的方法,同時也給出了一些簡單的代碼示例。希望對于大家實現頁面美化有所幫助。
下一篇https和vue