HTML CSS3陰影屬性

2021-10-03 15:03:15 字數 1138 閱讀 7612

css3陰影

1、文字陰影屬性 :text-shadow:10px 10px 10px red;

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

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

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

第四個值 : 陰影的顏色

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

例:

span
水平距離10px 垂直距離10px 模糊程度10px

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

如:

text-shadow:  10px 10px 4px blue,  10px 10px 4px #ff3, 10px 10px 6px #fd3,0px 10px 11px #f80, -10px -25px 18px #f20;
說明:水平、垂直陰影的位置允許負值可進行多陰影設定(逗號分隔的方式)

2、盒子陰影屬性

box-shadow 盒子陰影:

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

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

blur 可選。模糊距離

spread 可選。陰影的大小

color 可選。陰影的顏色。

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

例:

div
水平陰影10px 垂直陰影10px 模糊距離50px 陰影大小10px

如果加上inset就會講陰影改為內測

box-shadow: 10px 10px 50px 10px #9cbc2b inset;

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

html css3實現長方體效果

網上大都是正方體的效果,由於做乙個東西需要,寫了乙個html css3實現的長方體,有需要的也可以看看。2017 07 25 21 30 23 html 1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title html cs...

前端面試題HTML CSS3

一 優先順序就近原則,同權重情況下以最近者為準 優先順序為 important id class tag important 比 內聯優先順序高 css3 新增偽類 first child 選擇屬於其父元素的首個元素。last child 選擇屬於其父元素的最後乙個元素。only child 選擇屬...

HTML CSS3 模仿Windows7 桌面效果

前一陣在園子裡看到一篇文章 基於css3仿造window7的開始選單 文中僅使用css3 實現了windows 7 開始選單的動態效果,很久以來一直被wpf silverlight 山上的風景所吸引,未成想其他的山也同樣引人入勝。於是心血來潮也嘗試著做了乙個windows 7 桌面效果,先來看幾張截...