css3 文字陰影

2021-07-27 05:52:09 字數 1189 閱讀 9542

text-shadow

基本語法：

textshadow:none|< length>none|[ < shadow>,]*< shadow>

textshadow:none|< color>[,< color >]*

< length>: 表示由浮點數字和單位識別符號組成的長度值，可為負值，指定陰影的水平延伸距離；

< color>：表示顏色。

//陰影位於左上角


p;//陰影位於左下角


p;//陰影位於右上角


p;//陰影位於右下角


p;
text-shadow屬性第乙個值：表示水平位移（左負右正）；

text-shadow屬性第二個值：表示垂直位移（上負下正）；

text-shadow屬性第三個值：表示模糊半徑（可選）；

text-shadow屬性第四個值：表示顏色（可選）；

陰影效果

1.通過陰影增加前景色與背景色的對比度；

2.定義多色陰影；

text-shadow:0.2em 0.5em 0.1em #60;


0.2em -0.5em 0.1em #60;


-0.2em 0.5em 0.1em #60;
3.陰影可設定在文字線框外；

4.定義火焰文字；

text-shadow:0


04px white;


0 -5px 4px #ff3


2px -10px 6px #fd3;


-2px -15px 11px #f80;


2px -25px 18px #f20;
5.定義立體文字；

//凸起


text-shadow:-1px -1px #fff;


1px 1px #333;


//下凹


text-shadow:1px 1px #fff;


-1px -1px #333;
6.定義描邊文字；

text-shadow:-1px 0


#000;


1px 0


#000;


01px #000;


0 -1px #000;
7.定義外發光文字；

CSS3 文字陰影

例項 基礎的文字陰影效果 h1語法 text shadow h shadow v shadow blur color 注釋 text shadow 屬性向文字新增乙個或多個陰影。該屬性是逗號分隔的陰影列表，每個陰影有兩個或三個長度值和乙個可選的顏色值進行規定。省略的長度是 0。值描述 h shado...

css3文字陰影

text shadow可以用來設定文字的陰影效果。語法 1 text shadow x offset y offset blur color x offset 表示陰影的水平偏移距離，其值為正值時陰影向右偏移，反之向左偏移 y offset 是指陰影的垂直偏移距離，如果其值是正值時，陰影向下偏移，反...

CSS3文字陰影 盒子陰影

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