簡單上手CSS-Shadow

時間 2019-12-05

標籤簡單上手 css shadow 欄目 CSS 简体版

原文原文鏈接

CSS 的 Shadow屬性誰都知道，你們確定也都用過。html

我在學習這個屬性的時候常常記不住它的幾個語法參數,隨筆記錄下個人學習筆記。segmentfault

基本參數

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 必需。水平陰影的位置。容許負值
v-shadow 必需。垂直陰影的位置。容許負值
blur 可選。模糊距離
spread 可選。陰影的尺寸
color 可選。陰影的顏色。請參閱 CSS 顏色值
inset 可選。將外部陰影 (outset) 改成內部陰影

後來慢慢記住前5個基本參數後才發現還有內外陰影，疊加陰影的使用。dom

疊加陰影

<div  style="box-shadow:-10px 0px 10px red,   /*左邊陰影*/ 
                        0px -10px 10px #000,  /*上邊陰影*/ 
                        10px 0px 10px green,  /*右邊陰影*/ 
                        0px 10px 10px blue; /*下邊陰影*/ 
                        "></div>