CSS元素DIV阴影效果
本帖最后由 曲奇饼 于 2019-10-18 13:44 编辑css box-shadow 產生陰影效果或光暈效果的特性
說明：元素 ( elements ) 的 box 呈現陰影或光暈的效果。可指定陰影的位移距離、顏色、模糊程度、擴散程度，也支援內陰影，甚至多層次堆疊的陰影。運用這個 css level 3 ( css 3) 的特性 ( css property ) ，讓我們可以很輕鬆就能呈現迷人的視覺效果，而不需要煩瑣地一張一張製作圖片。更具意義的是，產生的陰影不會對版面編排造成影響。
適合：有 html 及 css 語法基礎概念者。
標準語法 :
box-shadow: x y blur spread color inset;
xyblurspreadcolorinset
水平位移垂直位移模糊强度(不可负)扩散强度颜色内阴影
說明 :
[*]共有 6 個特性值，每個值之間以至少一個半形空格間隔。預設值為 none (只有一個字) 。
[*]前面 4 個都是尺寸值 ( length ，不接受 %) ，依序表示水平位移距離 (x) 、垂直位移距離 (y) 、模糊強度 ( blur ) 、擴散強度 ( spread ) ，不可被其它的值插進其間。
[*]產生陰影，前 2 個位移值 ( x y ) 為必要值，必須指定；其餘的值可不定義。
[*]模糊 ( blur ) 及擴散 ( spread ) 強度預設值 (沒有定義時) 一般為 0 。模糊不能為負值。
[*]第 5 個可指定陰影顏色 ( color ) ， css 合法的 顏色值 表示法都可以，顏色值放在位移值前面也可以。沒有定義會使用 (或 繼承 ) color 特性指定的顏色值。
[*]第 6 個可指定為內陰影 ( inset ) ，改放在第 1 個位置也可以。沒有定義就是一般在外的陰影。
[*]所有組合起來的值，可增加為多組，以 , (逗號) 分隔，依序表示由前至後堆疊的多層陰影。
[*]適用元素：全部。
[*]適用媒體： visual 。
[*]不被繼承。
語法實例 :
语法以逗号分隔后可以设置多重阴影;
box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);
box-shadow:2px 2px 1px rgba(20%,20%,40%,0.5) inset;
box-shadow:2px 2px 2px rgba(20%,20%,40%,0.6),4px 4px 6px rgba(20%,20%,40%,0.4),6px 6px 12px rgba(20%,20%,40%,0.4);
页:
[1]