CSS3陰影屬性(逆戰班)

2021-10-03 15:57:07 字數 1019 閱讀 6464

李小龍"box">

文字陰影屬性

text-shadow

: 6px 6px 3px orange;

使用:

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

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

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

第四個值 : 陰影的顏色

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

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

text-shadow

:0 0 4px white,0 -5px 4px #ff3,2px -10px 6px #fd3, 2px -25px 18px #f20;

box-shadow 盒子陰影屬性

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

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

blur 可選。模糊距離

spread 可選。陰影的大小

color 可選。陰影的顏色。

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

box-shadow

: 6px 6px 4px 4px palegreen;

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

box-shadow

: 10px 10px 5px 10px #888888 inset,10px 10px 5px 10px #888888 inset;

逆戰班 盒子陰影

盒子陰影 box shadow 屬性用於向盒子新增乙個或多個陰影效果。offset x 陰影的水平偏移量。正數向右偏移,負數向左偏移。offset y 陰影的垂直偏移量。正數向下偏移,負數向上偏移。blur 陰影模糊度,不能取負數。spread 陰影大小。正數陰影擴大 陰影大小大於盒子大小 負數陰影...

逆戰班 css3屬性 2d變換 漸變

位移 transform translate 旋轉 transform rotate 縮放 transform scale 傾斜 transform skew transform translate 水平位移,垂直位移 transform translate 水平位移 transform trans...

css3動畫的基本用法之逆戰班系列

首先,我們要想用css3來做乙個動畫,不可避免的要用到transform和animation這兩個屬性值。首先呢,我們的transform的組合一共有5種,分別是 transform translate transform rotate transform scale transform skew ...