box-shadow:none;
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow引數解析 值
描述none
預設值,元素沒有任何陰影效果。
h-shadow
陰影水平偏移量,其值可以是正負值。如果取正值,則陰影在元素的右邊,反之取負值,陰影在元素的左邊。
v-shadow
陰影垂直偏移量,其值可以是正負值。如果取正值,則陰影在元素的底部,反之取負值,陰影在元素的頂部。
blur
陰影模糊半徑,可選引數。其值只能是正值,如果取值為「0」時,表示陰影不具有模糊效果,如果取值越大,陰影的邊緣就越模糊。
spread
陰影擴充套件半徑,可選引數。其值可以是正負值,如果取值為正值,則整個陰影都延展擴大,反之取值為負值,則整個陰影都縮小。
color
陰影顏色,可選引數,如果不設定任何顏色時,瀏覽器會取預設色,但各瀏覽器預設色不一樣,特別是在webkit核心下的瀏覽器將無色,也就是透明,建議不要省略這個引數。
inset
陰影型別,可選值。如果不設定,其預設的投影方式是**影;如果取其唯一值「inset」,就是給元素設定內陰影。
此處參考
在說明我們這個應用之前,先給大家推薦乙個**這個**裡面可以除錯盒子模型陰影,文字陰影,圓角等,功能挺多的,除錯完之後可以直接複製**
我們接下來要做的效果,是這樣的
注意這個區域,白色的盒子模型上面遺留著上面橙色盒子的邊框陰影,這個效果怎麼做呢?
<
div
class
="contain"
>
<
div
class
>
div>
<
div
class
>
div>
div>
*.contain
我們給橙色盒子設定了邊框陰影,橙色盒子的下邊框和白色盒子的上邊框緊密地貼在一起,這時候,問題出現了,我們來看看效果
我們發現橙色盒子的下邊框的陰影被白色盒子給遮住了,這可如何是好?我是用乙個特別猥瑣的方法解決的。
既然陰影被遮住了,那麼我們就讓白色盒子補償給橙色盒子一條陰影,不是有乙個引數叫做inset嗎?我們把白色盒子的上邊框的陰影往裡面投影,補上這個空缺不就好了嗎?
*.contain
box shadow的應用技巧
box shadow none box shadow h shadow v shadow blur spread color inset box shadow引數解析 值 描述none 預設值,元素沒有任何陰影效果。h shadow 陰影水平偏移量,其值可以是正負值。如果取正值,則陰影在元素的右邊,...
Two pointers技巧的應用
查詢陣列中兩個位置不同的數字之和為sum的個數。先來看看暴力法,粗略估計,時間複雜度為0 n 2 void violence int a,int totalnumber,int sum int count 0 計算不匹配的結果次數 不匹配次數是41次,嗯,看起來結果還不錯的樣子。來看看two poi...
譯 高效的 「box shadow」 動畫
如何才能防止在給box shadow製作動畫過渡時導致的每一幀都要進行的重繪 re paint 從而提高頁面的效能?答案就是 不可能。給變化的box shadow製作動畫會大大縮減頁面渲染的效能。但是,這裡依然有類似的方法實現相同的效果。盡量的減少重繪的次數,可以保證你的動畫能夠保證在60 fps左...