1. 阴影
box-shadow
text-shadow
阴影:横向偏移量 纵向偏移量 模糊距离 阴影颜色
background-color: #454545;
color: #333;
text-shadow: -1px -1px 0 #cecece,1px 1px 0 #5c5c5c;
background-color: #000;
color: #fff;
text-shadow: -5px -5px 8px #cd12c8,
5px -5px 8px #cd12c8,
-5px 5px 8px #cd12c8,
5px 5px 8px #cd12c8;
background-color: #ccc;
color: #fff;
text-shadow: 0 1px 0 #eee,
0 2px 0 #bcbcbc,
0 3px 0 #aaa,
0 4px 0 #999,
0 5px 0 #787878,
0 6px 0 #666;
2. 渐变
linear-gradient
radial-gradient
背景图: 渐变(方向,颜色1 百分比,颜色2 百分比,…)
<!DOCTYPE html>
<html>
<head>
<title>彩虹</title>
<style type="text/css">
div{
height: 200px;
width: 500px;
background-image: -webkit-radial-gradient(center bottom,white 40%,purple,deepskyblue, cyan,greenyellow,gold,orange,tomato,white 70%)
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意:如果设置radial-gradient后浏览器没有样式,需要改为-webkit-radial-gradient
3. 过渡
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #000;
overflow: hidden;
}
p {
width: 500px;
height: 100px;
font-size: 100px;
line-height: 100px;
text-align: center;
background-color: gray;
background-image: linear-gradient(35deg, transparent 10%, white 15%,transparent 20%);
/*背景剪裁*/
-webkit-background-clip: text;
color: transparent;
transition: 4s;
}
p:hover {
cursor: pointer;
background-position: 500px 0;
}
</style>
</head>
<body>
<p>滑动解锁</p>
</body>
</html>
4. 变形
旋转的单位:1圈 = 360deg = 1turn = 400grad
/*平移*/
transform: translateX(100px);
/*旋转 deg turn grad*/
transform: rotate(180deg);
/*transform: rotate(1turn);*/
/*transform: rotate(400grad);*/
/*transform: rotateX(90deg);*/
/*缩放*/
transform: scaleY(.5);
/*transform: scale(3);*/
/*倾斜*/
transform: skewY(-20deg);
<style>
section {
width: 200px;
height: 200px;
line-height: 200px;
color: white;
text-align: center;
background-color: deepskyblue;
margin-left: 200px;
transform-origin: left top;
transition: .5s;
}
section:hover {
transform: rotate(60deg);
}
</style>
5. 滤镜
属性 | 取值 | 作用 |
---|---|---|
filter:blur(4px) | 大于0 | 模糊 |
filter:brightness(2) | 正自然数 | 亮度 |
filter: contrast(2) | 正自然数 | 对比度 |
filter: drop-shadow() | 同box-shadow | 阴影 |
filter: grayscale(1) | [0,1] | 灰度 |
filter: hue-rotate(deg) | deg | 色相旋转 |
filter: invert(1) | [0,1] | 反转图像 |
filter: opacity(1) | [0,1] | 透明度 |
filter: saturate(1) | 正自然数 | 饱和度 |
filter: sepia(1) | [0,1] | 褐色 |