我們在網頁設計中經常會用到外發光的效果,這種效果可以讓頁面上的元素更加的突出,讓頁面看起來更具有層次感。那么,在CSS中要怎樣實現外發光的效果呢?
box-shadow:0px 0px 10px #000000;
上面這段代碼就是實現一個簡單的外發光效果的例子。下面我們來逐一解析這段代碼。
首先,CSS的box-shadow屬性可以為盒子添加一個陰影。這個屬性可以帶上四個值:水平偏移量、垂直偏移量、模糊半徑、以及顏色值。在這個例子中,水平偏移量和垂直偏移量的值都是0,這意味著陰影的位置會與盒子的位置重合。
然后,在這個例子中,我們設定了一個模糊半徑為10px。這個值越大,陰影就會越模糊。最后一個值就是顏色值,我們將其設定為黑色即#000000。當然,你可以根據實際情況自由地設定rgb或者其他的顏色值。
需要注意的是,CSS3中的box-shadow屬性不兼容IE早期版本,如果想要兼容所有瀏覽器,需要使用以下代碼:
-moz-box-shadow:0px 0px 10px #000000; -webkit-box-shadow:0px 0px 10px #000000; box-shadow:0px 0px 10px #000000;
上面這一組代碼就可以兼容大部分的瀏覽器啦。只要在CSS中妥善利用box-shadow屬性,就可以為網頁元素添加更加鮮明的外發光效果了。
上一篇css怎么寫全局樣式
下一篇css怎么做圓圈