CSS3文字陰影 盒子陰影屬性用法介紹

2021-10-03 16:09:40 字數 1042 閱讀 2828

基礎語法:text-shadow: h-shadow(必需) v-shadow(必需) blur(可選) color(可選);

h-shadow:水平陰影位置,x軸右側為正數,左側為負數(允許為負數)

v-shodwo:垂直陰影位置,y軸下方為正,y軸上方為負數(允許為負數)

blur:定義了陰影模糊距離

color:定義了陰影的顏色

text-shadow屬性允許新增乙個或多個陰影,不同陰影列表用逗號,隔開

text-shadow屬性具有繼承性,屬於css3新增屬性,預設值為:none;目前主流瀏覽器都支援text-shadow屬性(ie9以及更早的版本不支援該屬性)。box-shadow屬性可以設定乙個或多個下拉陰影的框。

基礎語法:

box-shadow: h-shadow(必需) v-shadow(必需) blur (可選)spread(可選) color (可選)inset;(可選)

h-shadow:水平陰影位置,x軸右側為正數,左側為負數(允許為負數)

v-shodwo:垂直陰影位置,y軸下方為正,y軸上方為負數(允許為負數)

blur:陰影模糊距離

spread:陰影的大小

color:陰影顏色

inset:內外投影樣式,預設為外投影,應用該屬性更改為內投影。

box-shadow屬性不具有繼承特點,屬於css3新增屬性,存在一些瀏覽器的相容問題,例如谷歌瀏覽器10.0以下版本,ie9以下版本,火狐4.0以下版本歐朋10.5以下版本無法使用該屬性。

CSS3文字陰影 盒子陰影

1 文字陰影text shadow text shadow 值1 值2 值3 值4 text shadow 10px 10px 4px pink 值1 水平方向位置,向右為正值 必須有,可以為負值 值2 垂直方向位置,向下為正值,必須有,可以為負值 值3 陰影的模糊程度,不支援負值 值4 顏色設定 ...

CSS3文字陰影和盒子陰影及其案例

文字陰影是css3其中的乙個屬性,它的書寫格式是text shadow 每個屬性必然有對應的屬性值。text shadow的屬性值有 x y blur color x是延x軸移動的距離,y是延y軸移動的距離,blur是陰影的模糊值。要注意一點的是在文字陰影沒有設定顏色的情況下,預設與文字的顏色一致。...

css3 文字陰影

text shadow 基本語法 textshadow none length none shadow shadow textshadow none color color length 表示由浮點數字和單位識別符號組成的長度值,可為負值,指定陰影的水平延伸距離 color 表示顏色。陰影位於左上角...