**015 3d動畫和盒陰影及濾鏡樣式**transform-style: preserve-3d;
perspective 只能給父級 允許改變3d元素檢視3d檢視其【子元素】會獲得透視效果 只影響3d轉換元素
perspective: 1000px;值可以自己設定
123456
h-shadow 水平陰影的偏移量【必須有】
v-shadow 垂直陰影的偏移量【必須有】
模糊距離 blur
陰影尺寸 spread
color:陰影顏色
outset/inset 外、內陰影 預設值outset
box-shadow:2px 1px 2px yellow inset;
文字陰影 text-shadow
box-shadow: 盒·陰影 預設值為 none;
h-shadow 水平陰影的偏移量【必須有】
v-shadow 垂直陰影的偏移量【必須有】
color:陰影顏色
text-shadow: 3px 4px 2px yellowgreen ;
濾鏡樣式詳解
filter:濾鏡屬性 預設值 none;
blur 高斯模糊 值越大越模糊
filter: brightness(%) 亮度; 預設值是100% 0%會全黑，大於100%越來越亮
filter: contrast();對比度 預設值是100% 0%會全灰 大於100%對比度會越來越強
filter: drop-shadow 陰影( h-shadow 水平陰影的偏移量 v-shadow 垂直陰影的偏移量, 模糊距離 blur)
filter: drop-shadow(3px 5px 5px );
filter: grayscale(%) 灰度 預設值0% 100%全灰;
filter: hue-rotate(dedg) 色相旋轉 預設值0deg;沒有最大值 超過360deg 相當於繞一圈
filter: invert(%);反轉輸入影象 0%預設值 100%會完全反轉
filter: opacity(%);透明度 100%預設值 0%完全透明 與opacity很像，不同之處 在於通過filter，一些瀏覽器會提供硬體速度
filter: saturate();飽和度100%預設值 0%完全不飽和，超過100%有更高的飽和度
filter: sepia();深褐色 0%預設值 100%就會變成完全的深褐色
3D動畫和盒陰影及濾鏡
3d 開闢異次元空間 transform style preserve 3d 視距，透視 perspective npx 盒陰影 必須要有的 h shadow 水平陰影 v shadow 垂直陰影 可以選擇的 blur 模糊距離 spread 陰影尺寸 color 陰影顏色 inset 內陰影 文字...
圓角 陰影 rgba 和 動畫
設定某乙個角的圓角，比如設定左上角的圓角 border top left radius 30px 60px 同時分別設定四個角 border radius 30px 60px 120px 150px 設定四個圓角相同 border radius 50 box shadow h shadow v sh...
前端十五課 3D動畫 陰影，濾鏡
3d動畫原理 在平面內建立乙個三維座標系，水平向右x正軸，垂直向下y正軸，由平面指向使用者的軸稱為z軸 3d動畫必備 1.perspective 1000px 通過給座標系新增perspective樣式即可增加z軸 2.z軸的位置可以用perspective樣式來設定 預設位置perspective...