box shadow的應用技巧

2021-09-26 19:51:25 字數 1536 閱讀 1572

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左...