(1)阴影
1、盒子阴影
- box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式] (inset凹凸);
除了阴影颜色和投影方式,其他值都是以px为单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影</title>
<style>
.box{
margin: 0 auto;
width: 200px;
height: 200px;
box-shadow: 2px 2px 10px 5px rgba(231, 4, 4, 0.1);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2、字体阴影
- text-shadow: h-shadow(水平阴影的位置) v-shadow(垂直阴影的位置) blur(模糊的距离) color(阴影的颜色);
该属性兼容浏览器:谷歌4.0 火狐3.5 Safari 4.0 Opare 9.6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体阴影</title>
<style>
p{
font-size: 50px;
line-height: 40px;
text-align: center;
text-shadow: 0px 0px 20px rgba(green, green, green, 20%);
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
(2)2D变换
1、平移
一个值:(px也可以是其他单位,如em)
标准,默认左右平移:transform:translate(num-px);
以x轴为准,左右平移:transform:translatex(num-px);
以y轴为准,上下平移:transform:translatey(num-px);
两个值:
分别以x和y轴为准,左右上下平移,第一个为x,第二个为y:transform:translate(num-px,num-px);
* num-px:如100px。
2、旋转
默认以原点旋转:transform:rotate(num-deg);
分别以x轴和y轴旋转:transform:rotate(num-deg,num-deg);
x轴倾斜:transform:rotate(num-deg);
y轴倾斜:transform:rotate(num-deg);
* deg:角度;num-deg:如45deg是45度。
3、缩放
默认四周缩放:transform:scale(num);
以x轴为准,左右缩放:transform:scalex(num);
以y轴为准,上下缩放:transform:scaley(num);
*缩放的单位是倍数,如transform:scale(1.5);表示1.5倍。
4、倾斜
默认以原点倾斜:transform:skew(num-deg);
分别以x轴和y轴倾斜:transform:skew(num-deg,num-deg);
x轴倾斜:transform:skewx(num-deg);
y轴倾斜:transform:skewy(num-deg);
* 倾斜也是以角度deg为单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>