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 桌面效果,先來看幾張截...