CSS揭秘 規則投影

2022-02-21 00:53:16 字數 642 閱讀 3961

第三個引數是模糊半徑,使用高斯模糊演算法進行模糊處理。本質上表示在陰影邊緣發生陰影色和純透明色之間的顏色過渡長度近似於模糊半徑的兩倍。

第四個引數是擴張半徑,會根據指定的值擴大或者縮小投影的尺寸。寬度和高度分別擴張或者減少兩倍的擴張半徑。

單側投影

如果給乙個負的擴張半徑,其數值又剛好等於模糊半徑,那麼投影尺寸就會與投影元素的尺寸完全一致,如果沒有設定偏移量就會完全看不到任何投影。也就是說如果想在哪一邊進行投影,只需要在那一邊進行偏移即可。

鄰邊投影

擴張半徑設定為模糊半徑的一半,同時相鄰兩邊的偏移量設定為大於或等於模糊半徑的一半。

雙側投影

將單側投影重複一次即可

1. 單側投影

box-shadow: 0 10px 8px -8px black;

2. 鄰邊投影

box-shadow: 10px 10px 8px -4px black;

3. 雙側投影

box-shadow: 10px 0 10px -10px black, -10px 0 10px -10px black;

CSS揭秘(引言)

1.當某些值相互依賴時,應該把 它們的相互關係用 表達出來 2.要把超連結的顏色設定為與頁面中其他文字相同,還是要用 inherit a 3.inherit 關鍵字對於背景色同樣非常有用 callout callout before 4.如何避免不必要的 查詢 1 使用百分比長度來取代固定長度。如果...

css揭秘系列

7.結構和布局 自適應內部元素 min content 容器內部最大的不可斷行元素的寬度 即最寬的單詞 或具有固定寬度的盒元 素 countess ada lovelace,the first programmer.問題是文字內容可能很長導問題 解決 figure 水平居中 行內 text alig...

CSS揭秘(引言)

1 標準的制定過程 a 人員結構 w3c會員公司的成員 特邀專家 w3c工作人員 b 儘管 css3 非常流行,但它實際上並沒有在任何規範中定義過。它實際上是指乙個非正式的集合,包括css規範第三版再加上一些版本號還是1的新規範。2 css編碼技巧 a 儘量減少 重複 b 相信你的眼睛,而不是數字 ...