css中box shadow盒子陰影

2021-09-28 22:15:16 字數 837 閱讀 1735

**影:box-shadow: x軸  y軸  rpx  color;

屬性說明(順序依次對應): 陰影的x軸(可以使用負值) 陰影的y軸(可以使用負值) 陰影模糊值(大小) 陰影的顏色

內陰影:box-shadow: x軸 y軸 rpx color inset;

預設是**影 內陰影:inset 可以設定成內部陰

此屬性使用於盒模型 如(div,p,h1,h2,h3,h4,h5,h6等) 不是用來設定文字陰影   如果設定文字陰影請參考知識點:text-shadow(同理)

因為是新屬性,為了相容各主流瀏覽器並支援這些主瀏覽器的較低版本,基於主流瀏覽器上使用box-shadow屬性時,我們需要將屬性的名稱寫成-webkit-box-shadow的形式。firefox瀏覽器則需要寫成-moz-box-shadow的形式

none:無陰影

length①:第 1 個長度值定義元素的陰影水平偏移值。正值,陰影出現在元素右側;負值,則陰影出現在元素左側

length②:第 2 個長度值定義元素的陰影垂直偏移值。正值,陰影出現在元素底部;負值,則陰影出現在元素頂部

length③:第 3 個長度值定義元素的陰影模糊值半徑(如果提供了)。該值越大陰影邊緣越模糊,若該值為0,陰影邊緣不出現模糊。不允許負值

length④:第 4 個長度值定義元素的陰影外延值(如果提供了)。正值,陰影將向四面擴充套件;負值,則陰影向里收縮

color:定義元素陰影的顏色。如果該值未定義,陰影顏色將預設取當前最近的文字顏色

inset:定義元素的陰影型別為內陰影。該值為空時,則元素的陰影型別為**影『

CSS3盒子陰影box shadow

來自w3cschool的解釋 語法 box shadow h shadow v shadow blur spread color inset 值描述 h shadow 必需。水平陰影的位置。允許負值。v shadow 必需。垂直陰影的位置。允許負值。blur 可選。模糊距離。spread 可選。陰影...

box shadow 陰影 CSS內陰影

注意 ie6 ie8都不支援邊框陰影 box shadow ie9 firefox,chrome,opera支援邊框陰影屬性 box shadow 內陰影 inset 影 預設為 影 在邊框陰影 box shadow 的基本語法中,引數inset是可選可不選的,選引數inset,將外部陰影改為內部陰...

css中盒子模型

css盒模型 簡介 就是用來裝頁面上的元素的矩形區域。css中的盒子模型包括ie盒子模型和標準的w3c盒子模型。box sizing 有3個值哦 content box border box inherit 標準盒子模型 ie盒子模型 標準盒子模型與ie盒子模型區別 標準的盒子模型 w3c 標準 盒...