1.渐变
语法：background: linear-gradient (direction, color-stop1, color-stop2, ...);
- 线性渐变（横向）
<body>
<div class="b">
</div>
</body>
<style>
.b {
width: 200px;
height: 200px;
/*线性渐变*/
background: linear-gradient(90deg,red,yellow);
}
</style>
效果展示：
- 线性渐变（竖向）
<body>
<div id="grad1"></div>
</body>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(#92fdff, #ff39fe);
background: -o-linear-gradient(#85f7ff, #ff49f9);
background: -moz-linear-gradient(#a0f0ff, #ff4af0);
background: linear-gradient(#b6eeff, #fb44ff);
}
</style>效果展示：
- 线性渐变（对角）
<body>
<div id="grad1"></div>
</body>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left top, #69ff78, #ff47e8);
background: -o-linear-gradient(bottom right, #82ff77, #ff5bf9);
background: -moz-linear-gradient(bottom right, #73ff7f, #ff52fb);
background: linear-gradient(to bottom right, #86ff84, #ea67ff); /
}
</style>
效果展示：
- 线性渐变（使用角度）
<body>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
</body>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(0deg, #60f7ff, #ff17e0);
background: -o-linear-gradient(0deg, #50ffc8, #fa27ff);
background: -moz-linear-gradient(0deg, #69fffc, #e617ff);
background: linear-gradient(0deg, #4dffe2, #ed24ff);
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(90deg, #fff827, blue);
background: -o-linear-gradient(90deg, #ffe921, blue);
background: -moz-linear-gradient(90deg, #ffe820, blue);
background: linear-gradient(90deg, #ffe71e, blue);
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, #ff3426, #69ff27);
background: -o-linear-gradient(180deg, red, #91ff27);
background: -moz-linear-gradient(180deg, red, #74ff19);
background: linear-gradient(180deg, red, #6fff15);
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, #e5ff30, #0cff7e);
background: -o-linear-gradient(-90deg, #fff91e, #4dff18);
background: -moz-linear-gradient(-90deg, #efff12, #0dff17);
background: linear-gradient(-90deg, #f1ff1d, #38ff0e);
}
</style>效果展示：
- 使用颜色结点
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
</div>
</body>
<style>
#grad1 {
height: 55px;
background: -webkit-linear-gradient(left, #1830ff, #cf10ff, #ff1427, #c4c00e, #2eff11, indigo, violet);
background: -o-linear-gradient(left, #2610ff, #ff1bef, #ff3a0f, #bec019, #35ff1f, indigo, violet);
background: -moz-linear-gradient(left, #4321ff, #f913ff, #ff3219, #bec114, #1bff0c, indigo, violet);
background: linear-gradient(to right, #0e2bff, #ff19dd, #ff3a0f, #b5bc14, #2eff06, indigo, violet);
</style>效果展示：
- 使用透明度
<body>
<div id="grad1"></div>
</body>
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient( rgba(255,0,0,0), rgb(255, 246, 22));
background: -o-linear-gradient( rgba(255,0,0,0), rgb(246, 255, 35));
background: -moz-linear-gradient( rgba(255,0,0,0), rgb(247, 255, 30));
background: linear-gradient( rgba(255,0,0,0), rgb(255, 246, 28));
}
</style>效果展示：
（2）圆形渐变
<style>
.b{
/*圆形渐变*/
background: radial-gradient(red, yellow, blue, green, pink, orange);
}
</style>效果展示：
2.文本阴影
text-shandow
<body>
<h1>在这温暖的房间</h1>
</body>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
效果展示：
3.滤镜
（1）filter:blur(模糊效果：像素）
<body>
<img src="./img/11.jpg" alt=""/>
</body>
img {
width: 200px;
height: 150px;
filter: blur(1px);
}
</style>效果展示：
（2）filter: brightness(亮度：数字)
<style>
img {
width: 200px;
height: 150px;
filter: brightness(20);
}
</style>效果展示：
（3）filter: contrast（明暗度：百分比）
<style>
img {
width: 200px;
height: 150px;
filter: contrast(50%);
}
</style>效果展示：
（4）filter: grayscale（灰度：百分比）
<style>
img {
width: 200px;
height: 150px;
filter: grayscale(100%);
}
</style>效果展示：
（5）filter: saturate（饱和度：百分比）
<style>
img {
width: 200px;
height: 150px;
filter: saturate(100%);
}
</style>效果展示：
