文字陰影與盒子陰影

2021-10-03 15:28:15 字數 1114 閱讀 1202

1、文字陰影屬性

語法:text-shadow:10px 10px 10px red;

注: 第乙個值 : 水平方向的距離 (必須有的:支援負值)

第二個值 : 垂直方向的距離 (必須有的:支援負值)

第三個值 : 陰影的模糊程度 (不支援負值)

第四個值 : 陰影的顏色

第乙個值 和 第二個值得位置不能互換;

當給同乙個文字設定多個陰影的時候,陰影和陰影之間用逗號隔開:

如: text-shadow:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3,

-2px -15px 11px #f80,2px -25px 18px #f20;

例:效果圖與**

說明:水平、垂直陰影的位置允許負值

可進行多陰影設定(逗號分隔的方式)

2、盒子陰影屬性

box-shadow 盒子陰影:

語法:box-shadow: 10px 10px 5px 10px #888888 inset;

x-shadow 必需的。水平陰影的位置。允許負值

y-shadow 必需的。垂直陰影的位置。允許負值

blur 可選。模糊距離

spread 可選。陰影的大小

color 可選。陰影的顏色。

inset 可選。從外層的陰影(開始時)改變陰影內側陰影

當給乙個盒子設定多個陰影的時候,陰影和陰影之間用逗號隔開:
box-shadow: 10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset;

例:效果圖與**

盒子陰影與文字陰影

1.如何給盒子新增陰影 box shadow 水平偏移 垂直偏移 模糊度 陰影擴充套件 陰影顏色 內外陰影 2.注意點 2.1盒子的陰影分為內外陰影,預設情況下就是外陰影 2.2快速新增陰影只需要編寫三個引數即可 box shadow 水平偏移 垂直偏移 模糊度 預設情況下陰影的顏色和盒子內容的顏色...

盒子陰影 文字陰影

css3中新增了盒子陰影,我們可以使用box shadow屬性為盒子新增陰影。語法 box shadow h shadow v shadow blur spread color inset 值 描述h shadow 必須。水平陰影的位置。允許負值。v shadow 必須。垂直陰影的位置。允許負值。b...

盒子 文字陰影

一.html css3盒子 文字陰影 box shadow 是你個css3的乙個新屬性,用來實現陰影效果,陰影分為內陰影和 影兩個效果,可以通過逗號新增多個陰影效果。box shadow陰影用法 box shadow inset offset x offset y blur radius sprea...