目录
1.文本对齐text -align
2.保留空白字符white-space
3.设置文本方向direction
4.设置文本缩进text-indent
4.设置字符间距letter-spacing
6.设置行高line-height
7.纵向对齐文本vertical-align
8.创建文本阴影text-shadow
9.控制断词word-break
10.控制文本溢出
11.装饰文本text-decoration
12.转换大小写text-transform
13.字体font
14.过度transition
14.1过渡延迟transition-delay
14.2指定过渡元素和持续时间
15.自定义运动轨迹cubic-bezier()
16.卡点步进steps()
17.旋转rotate()
17.1 2D旋转
17.2 3D旋转
18.2D移动translate
19.2D缩放scale
20.2D倾斜skew
21.修改变形原点transf-origin
22.3D变形方式
23.修改视域perspective
24.处理背面backface-visibility
25.动画
26.滤镜filter
26.1 高斯模糊blur
26.2 亮度brightness
26.3 投影drop-shadow
26.4 应用多个滤镜blend
27.混合模式mix-blend-mode
1.文本对齐text -align
例子1：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置文本对齐</title><style type="text/css">p{color: red;background-color:lightgray;}.start{text-align: start;}.end{text-align: end;}.left{text-align: left;}.right{text-align: right;}.center{text-align: center;}.justify{text-align: justify;}</style></head><body><p class="start">start</p><p class="end">end</p><p class="left">left</p><p class="right">right</p><p class="center">center</p><p class="justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum error debitis modi aliquid pariatur id ab architecto mollitia necessitatibus possimus fugit tenetur sit, dicta laudantium sequi voluptates officiis accusamus cupiditate.</p></body></html>
2.保留空白字符white-space
例子2：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>保留空白字符</title><style type="text/css">p{color: red;background-color: lightgray;white-space: pre-wrap;}</style></head><body><p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p></body></html>
3.设置文本方向direction
例子3：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置文本方向</title><style type="text/css">p{color: red;background-color: lightgray;white-space: pre-wrap;direction: rtl;/*规定文本的方向 */unicode-bidi: bidi-override;/*用于同一个页面里存在从不同方向读进的文本显示*/}</style></head><body><p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p></body></html>
例子4：文本垂直方向
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置文本方向</title><style type="text/css">p{color: red;background-color: lightgray;writing-mode: vertical-rl;/*设置文本垂直方向*/float: right;}</style></head><body><p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p></body></html>
4.设置文本缩进text-indent
例子5：首行缩进两字符
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置缩进</title><style type="text/css">p{color:red;background-color: lightgray;text-indent: 2em;}</style></head><body><p>从明天起,做一个幸福的人。喂马，劈柴，周游世界。从明天起,关心粮食和蔬菜。我有一所房子，面朝大海,春暖花开。从明天起，和每一个亲人通信。告诉他们我的幸福。那幸福的闪电告诉我的。我将告诉每一个人。给每一条河每一座山取一个温暖的名字。陌生人，我也为你祝福。愿你有一个灿烂的前程。愿你有情人终成眷属。愿你在尘世获得幸福。我只愿面朝大海，春暖花开。</p></body></html>
4.设置字符间距letter-spacing
例子6：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置间距</title><style type="text/css">p{color: red;background-color: lightgray;white-space:pre-wrap;letter-spacing: 1em;/*字符之间的距离*/line-height: 2;/*行高*/}</style></head><body><p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p></body></html>
6.设置行高line-height
例子7：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>设置行高</title><style type="text/css">.red{line-height: 1.5;border: 2px solid red;}.blue{line-height: 1.5em;border: 2px solid blue;}.box{width: 20em;display: inline-block;vertical-align: top;font-size: 15px;}</style></head><body><h1>为什么官方推荐在设置lineheight时使用无单位数值</h1><div class="box red"><h1>有单位的行高 有单位的行高 有单位的行高 有单位的行高</h1><p>使用长度值和百分比来定义行高具有较差的继承性</p></div><div class="box blue"><h1>无单位的行高 无单位的行高 无单位的行高 无单位的行高</h1><p>使用长度值和百分比来定义行高具有较差的继承性</p></div></body></html>
7.纵向对齐文本vertical-align
例子：vertical-align
<!DOCTYPE html><html><head><meta charset="utf-8"><title>纵向对齐文本</title><style type="text/css">p{font-size: 20px;background-color: lightgray;}img{width: 0.5em;}.top{vertical-align: top;}.middle{vertical-align: middle;}.bottom{vertical-align: bottom;}</style></head><body><p>好好学习，天天向上<img class="top" src="pic/maomao.jpg"/></p><p>好好学习，天天向上<img class="middle" src="pic/maomao.jpg"/></p><p>好好学习，天天向上<img class="bottom" src="pic/maomao.jpg"/></p></body></html>
8.创建文本阴影text-shadow
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>创建文本阴影</title><style type="text/css">p{font-size: 30px;color: red;background-color: lightgray;white-space: pre-wrap;text-shadow: 2px 2px 5px darkred;}</style></head><body><p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p></body></html>
9.控制断词word-break
例子：word-break: break-all
<!DOCTYPE html><html><head><meta charset="utf-8"><title>控制断词</title><style type="text/css">p{color: red;background-color: lightgray;padding: 10px;width: 200px;word-break: break-all;}</style></head><body><p>你知道26个字母是什么吗？是的，它们是“ABCDEFGHIJKLMNOPQRSTUVWXYZ”</p></body></html>
未加word-break
加word-break
10.控制文本溢出
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>控制文本溢出</title><style type="text/css">p{color: red;background-color: lightgray;padding: 10px;width: 200px;white-space: nowrap;/*禁止文件自动换行*/overflow: hidden;/*溢出隐藏*/text-overflow: ellipsis;/*ellipsis:当对象内文本一处时显示省略标记(...)*/}</style></head><body><p>你知道26个字母是什么吗？是的，它们是“ABCDEFGHIJKLMNOPQRSTUVWXYZ”</p></body></html>
11.装饰文本text-decoration
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>修饰文本</title><style type="text/css">P{color:red;background-color: lightgray;text-decoration: underline 2px wavy red; /*红色波浪形粗2px的下划线*/}a{text-decoration: none;/*去掉超链接下划线*/}</style></head><body><p>你可以通过<a href="https://www.baidu.con">百度</a>查询东西</p></body></html>
12.转换大小写text-transform
例子：一律小写
<!DOCTYPE html><html><head><meta charset="utf-8"><title>转换大小写</title><style type="text/css">p{color: red;background-color: lightgray;padding: 10px;width: 200px;word-break: break-all;text-transform: lowercase;/*lowercase定义仅有小写字母*/}</style></head><body><p>你知道26个字母是什么吗？是的，它们是“ABCDEFGHIJKLMNOPQRSTUVWXYZ”</p></body></html>
13.字体font
例子：字体和字号
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择字体</title><style type="text/css">.p1{font-family: 'SimHei';}.p2{font-family: 'LiSu';}.p3{font-family: 'KaiTi';}.p4{font-family: 'SimSun';}.p5{font-family: 'YouYuan';}.p6{font-size:xx-small;}.p7{font-size:x-small;}.p8{font-size:small;}.p9{font-size: medium;}.p10{font-size: large;}.p11{font-size:x-large;}.p12{font-size:xx-large;}.p13{font-size: 20px;}.p14{font-size: 100%;}.p15{font-size: 1em;}.p16{font-size: 1rem;}.p17{font-size: 2vw;}</style></head><body><h1>1.不同字体</h1><p class="p1">这是黑体</p><p class="p2">这是隶书</p><p class="p3">这是楷体</p><p class="p4">这是宋体</p><p class="p5">这是幼圆体</p><h1>2.字体大小</h1><p class="p6">xx-small好好学习</p><p class="p7">x-small好好学习</p><p class="p8">small好好学习</p><p class="p9">medium好好学习</p><p class="p10">large好好学习</p><p class="p11">x-large好好学习</p><p class="p12">xx-large好好学习</p><h1>3.字体单位</h1><p class="p13">20px的字体大小</p><p class="p14">100%表示占父元素字号的百分比</p><p class="p15">em表示父元素字号的倍数</p><p class="p16">rem表示根元素字号的倍数</p><p class="p17">vw表示视口宽度，随着浏览器放大缩小，字体尺寸会随之改变</p></body></html>
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择字体</title><style type="text/css">.w2{font-weight: bold;}.w4{font-style: italic;}.w6{font-variant: small-caps;}</style></head><body><h2>4.字体加粗(font-weight)</h2><p class="w1">好好学习天天向上</p><p class="w2">好好学习天天向上（加粗）</p><h2>5.字体风格(font-style)</h2><p class="w3">好好学习天天向上</p><p class="w4">好好学习天天向上（斜体）</p><h2>6.字体变形(font-variant)</h2><p class="w5">Hello World</p><p class="w6">Hello World（变形）</p></body></html>
14.过度transition
例子：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>过渡</title><style type="text/css">p{color:red;background-color: lightgray;padding: 20px;}span{transition: 2s;}span:hover{background-color: black;font-size: 2em;}</style></head><body><p>过度是什么？过渡就是使原本“刷”一下就过来的效果，变得<span>丝滑。</span></p></body></html>
14.1过渡延迟transition-delay
例子：过渡延迟3s
<!DOCTYPE html><html><head><meta charset="utf-8"><title>过渡</title><style type="text/css">p{color:red;background-color: lightgray;padding: 20px;}span{transition: 2s;transition-delay: 3s;/*过渡延迟*/}span:hover{background-color: black;font-size: 2em;}</style></head><body><p>过度是什么？过渡就是使原本“刷”一下就过来的效果，变得<span>丝滑。</span></p></body></html>
14.2指定过渡元素和持续时间
<!DOCTYPE html><html><head><meta charset="utf-8"><title>过渡</title><style type="text/css">div{width: 100px;height: 100px;background:lightblue;transition-property:width,height;/*指定应用过渡的属性名*/transition-duration:2s,4s;/*过渡的持续时间*/}div:hover{width: 300px;height: 300px;}</style></head><body><div></div></body></html>
15.自定义运动轨迹cubic-bezier()
例子：曲线运动
<!DOCTYPE html><html><head><meta charset="utf-8"><title>过渡曲线</title><style type="text/css">div{width: 100px;height: 30px;color: red;padding: 10px;margin:20px;background-color:lightgray;transition: width 3s;}#div1{transition-timing-function: ease;}#div2{transition-timing-function: linear;}#div3{transition-timing-function: ease-in;}#div4{transition-timing-function: ease-out;}#div5{transition-timing-function: ease-in-out;}#div6{transition-timing-function:cubic-bezier(0.18,0.99,0.97,-0.12);}div:hover{width: 600px;}</style></head><body><div id="div1">ease</div><div id="div2">linear</div><div id="div3">ease-in</div><div id="div4">ease-out</div><div id="div5">ease-in-out</div><div id="div6">贝赛尔曲线</div></body></html>
16.卡点步进steps()
steps(number, position)
number 整数值，表示把动画分成了多少段。position 可选参数，表示动画跳跃执行是在时间段的开始还是结束。
steps(5,start);
steps(5,start);
start 在时间段的开头处跳跃end 在时间段的结束处跳跃
例子：卡点
<!DOCTYPE html><html><head><meta charset="utf-8"><title>过渡曲线</title><style type="text/css">div{width: 100px;height: 30px;color: red;padding: 10px;margin:20px;background-color:lightgray;transition: width 3s;}#div7{transition-timing-function:steps(5,start);}#div8{transition-timing-function:steps(5,end);}div:hover{width: 600px;}</style></head><body><div id="div7">卡点步进start</div><div id="div8">卡点步进end</div></body></html>
17.旋转rotate()
17.1 2D旋转
例子：2D旋转
<!DOCTYPE html><html><head><meta charset="utf-8"><title>2D旋转</title><style type="text/css">div{display: inline-block;width: 200px;height: 200px;margin: 20px;padding: 20px;transition: 2s;color: red;background-color: lightgray;}.rotate_L:hover{background-color: pink;transition: 2s;transform: rotate(-1800deg);}.rotate_R:hover{background-color:pink ;transition: 2s;transform: rotate(1800deg);}</style></head><body><div class="rotate_L">2D向左旋转</div><div class="rotate_R">2D向右旋转</div></body></html>
17.2 3D旋转
例子:3D旋转
<!DOCTYPE html><html><head><meta charset="utf-8"><title>3D旋转</title><style type="text/css">div{display:inline-block;width: 100px;height: 100px;margin: 20px;padding: 20px;transition: 2s;color: red;background-color: lightgray;}.x_rotate:hover{background-color:pink;transition: 2s;transform: rotateX(180deg);}.y_rotate:hover{background-color: pink;transition: 2s;transform: rotateY(180deg);}.z_rotate:hover{background-color: pinky;transition: 2s;transform: rotateZ(180deg);}.rotate3d:hover{background-color: pink;transition: 2s;transform: rotate3D(1,1,1,180deg);}</style></head><body><div class="x_rotate">3D基于x轴旋转</div><div class="y_rotate">3D基于y轴旋转</div><div class="z_rotate">3D基于z轴旋转</div><div class="rotate3d">3D基于3个轴轴旋转</div></body></html>
18.2D移动translate
例子：2D移动效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>2D移动效果</title><style type="text/css">div{display:inline-block;width: 100px;height: 100px;margin: 20px;padding: 20px;transition: 2s;color: red;background-color: lightgray;}.x_translate:hover{background-color: pink;transition: 2s;transform: translateX(-200px);}.y_translate:hover{background-color: pink;transition: 2s;transform: translateY(200px);}.xy_translate:hover{background-color: pink;transition: 2s;transform: translate(-200px,200px);}</style></head><body><div class="x_translate">沿着x轴移动</div><div class="y_translate">沿着y轴移动</div><div class="xy_translate">沿着xy轴移动</div></body></html>
19.2D缩放scale
例子：2D缩放
<!DOCTYPE html><html><head><meta charset="utf-8"><title>2D缩放效果</title><style type="text/css">div{display:inline-block;width: 100px;height: 100px;margin: 20px;padding: 20px;transition: 2s;color: red;background-color: lightgray;}.x_scale:hover{background-color: pink;transition: 2s;transform: scaleX(1.5);}.y_scale:hover{background-color: pink;transition: 2s;transform: scaleY(0.5);}.xy_scale:hover{background-color: pink;transition: 2s;transform: scale(1.5,0.5);}</style></head><body><div class="x_scale">沿着x轴放大</div><div class="y_scale">沿着y轴缩小</div><div class="xy_scale">沿着xy轴伸缩</div></body></html>
20.2D倾斜skew
例子：2D倾斜效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>2D倾斜效果</title><style type="text/css">div{display:inline-block;width: 100px;height: 100px;margin: 20px;padding: 20px;transition: 2s;color: red;background-color: lightgray;}.x_skew:hover{background-color: pink;transition: 2s;transform: skewX(45deg);}.y_skew:hover{background-color: pink;transition: 2s;transform: skewY(45deg);}.xy_skew:hover{background-color: pink;transition: 2s;transform: skew(15deg,30deg);}</style></head><body><div class="x_skew">基于x轴倾斜</div><div class="y_skew">基于y轴倾斜</div><div class="xy_skew">基于xy轴倾斜</div></body></html>
21.修改变形原点transf-origin
例子：旋转原点
<!DOCTYPE html><html><head><meta charset="utf-8"><title>修改变形原点</title><style type="text/css">div{display:inline-block;width: 200px;height: 200px;margin: 20px;padding: 20px;transition: 2s;color: red;background-color: lightgray;}.left_top{transform-origin: left top;}.right_bottom{transform-origin: right bottom;}.length{transform-origin: 50px 100px;}.percent{transform-origin: 80% 80%;}.left_top:hover{background-color: pink;transform: rotate(45deg);}.right_bottom:hover{background-color: pink;transform: rotate(45deg);}.length:hover{background-color: pink;transform: rotate(45deg);}.percent:hover{background-color: pink;transform: rotate(45deg);}</style></head><body><div class="left_top">以左上角为原点</div><div class="right_bottom">以右下角为原点</div><div class="percent">以(80%,80%)为原点</div><div class="length">以(50px,100px)为原点</div></body></html>
22.3D变形方式
例子：3D变形
<!DOCTYPE html><html><head><meta charset="utf-8"><title>3D变形方式</title><style type="text/css">div{padding: 50px;transition:2s ;}.lightgray{background-color: lightgray;transform-style: preserve-3d;}.red{background-color: red;}.lightgray:hover{transform: rotateY(45deg);}.red:hover{transform: rotateY(-45deg);}</style></head><body><div class="lightgray">好好学习<div class="red">天天向上</div></div></body></html>
23.修改视域perspective
例子：不同视域效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>修改视域</title><style type="text/css">div{display:inline-block;width: 200px;height: 200px;margin: 10px;padding: 10px;transition: 2s;color: red;background-color: lightgray;}.pers100:hover{background-color: pink;transform: perspective(100px) rotateY(-45deg);}.pers200:hover{background-color: pink;transform: perspective(200px) rotateY(-45deg);}.pers800:hover{background-color: pink;transform: perspective(800px) rotateY(-45deg);}.pers2000:hover{background-color: pink;transform: perspective(2000px) rotateY(-45deg);}.nopers:hover{background-color: pink;transform: rotateY(-45deg);}</style></head><body><div class="pers100">100px深度的视域</div><div class="pers200">200px深度的视域</div><div class="pers800">800px深度的视域</div><div class="pers2000">2000px深度的视域</div><div class="nopers">没有设置视域</div></body></html>
例子：图片视域效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>视域</title><style type="text/css">div{width: 600px;height: 200px;margin: 0 auto;}img{width: 200px;}.one img{transform: perspective(200px) rotateX(30deg);}.two img{transform: rotateX(30deg);}.two{perspective: 200px;}</style></head><body><div><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div><div class="one"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div><div class="two"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div></body></html>
例子：perspective-origin改变基点
<!DOCTYPE html><html><head><meta charset="utf-8"><title>视域</title><style type="text/css">div{width: 600px;height: 200px;margin: 0 auto;}img{width: 200px;}.one img{transform: perspective(200px) rotateX(30deg);}.two img{transform: rotateX(30deg);}.two{perspective: 200px;perspective-origin: left top;/*改变基点*/}</style></head><body><div><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div><div class="one"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div><div class="two"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div></body></html>
24.处理背面backface-visibility
例子：背面处理
<!DOCTYPE html><html><head><meta charset="utf-8"><title>背面处理</title><style type="text/css">div{display:inline-block;width: 200px;height: 200px;margin: 10px;padding: 10px;transition: 2s;color: red;background-color: lightgray;}.one:hover{background-color: pink;transform: rotateY(180deg);}.two:hover{background-color: pink;backface-visibility: hidden;transform: rotateY(180deg);}</style></head><body><div class="one">背面可见</div><div class="two">背面隐藏</div></body></html>
25.动画
关键帧@keyframes
关键帧：计算机动画术语，指动画从当前的样式转变成最终样式的一个规则。
animation-delay：动画开始前的延迟animation-iteration-count：动画的播放次数animation-direction：指定动画方向animation-fill-mode：指定动画填充模式
例子：关键帧
<!DOCTYPE html><html><head><meta charset="utf-8"><title>定义和引用关键帧</title><style type="text/css">@keyframes example1{from{background-color: red;}to{background-color: green;}}@keyframes example2{0%{background-color:pink;}25%{background-color:lemonchiffon;}50%{background-color: lightblue;}75%{background-color: lightgray;}}div{display:inline-block;width: 200px;height: 200px;margin:50px;}.one{animation-name: example1;animation-duration: 6s;animation-iteration-count: 6;}.two{animation-name: example2;animation-delay: 2s;/*动画开始前的延迟*/animation-duration: 6s;animation-iteration-count: 6;/*动画的播放次数*/animation-direction: alternate;/*指定动画方向，alternate意为第一次是顺时针播放颜色，第二次逆时针播放颜色，之后依次……*/}</style></head><body><div class="one"></div><div class="two"></div></body></html>
animation-fill-mode：指定动画填充模式
例子：皮球降落
<!DOCTYPE html><html><head><meta charset="utf-8"><title>皮球动画演示</title><style type="text/css">@keyframes example{0%{transform: translateY(0PX);animation-timing-function: ease-in;}15%{transform: translateY(250px);animation-timing-function: ease-out;}30%{transform: translateY(30px);animation-timing-function: ease-in;}45%{transform: translateY(250px);animation-timing-function: ease-out;}55%{transform: translateY(90px);animation-timing-function: ease-in;}65%{transform: translateY(250px);animation-timing-function: ease-out;}75%{transform: translateY(150px);animation-timing-function: ease-in;}80%{transform: translateY(250px);animation-timing-function: ease-out;}85%{transform: translateY(190px);animation-timing-function: ease-in;}90%{transform: translateY(250px);animation-timing-function: ease-out;}94%{transform: translateY(230px);animation-timing-function: ease-in;}100%{transform: translateY(250px);animation-timing-function: ease-out;}}div{width: 300px;height: 300px;border-bottom: 2px solid;}img{height: 50px;position: relative;left: 100px;animation-name: example;animation-duration: 3s;animation-direction: alternate;animation-fill-mode: forwards;/*指定动画填充模式：动画结束后保留最后一帧画面*/}</style></head><body><div><img src="pic/qiu.jpg"/></div></body></html>
26.滤镜filter
26.1 高斯模糊blur
例子：高斯模糊
<!DOCTYPE html><html><head><meta charset="utf-8"><title>高斯模糊</title><style type="text/css">div{display: inline-block;}img{width: 200px;height: 200px;padding: 10px;}.blur2{filter: blur(2px);}.blur5{filter: blur(5px);}</style></head><body><div><img src="pic/mao.jpg"/></div><div><img class="blur2" src="pic/mao.jpg"/></div><div><img class="blur5" src="pic/mao.jpg"/></div></body></html>
26.2 亮度brightness
例子：亮度
<!DOCTYPE html><html><head><meta charset="utf-8"><title>亮度</title><style type="text/css">div{display: inline-block;}img{width: 200px;height: 200px;padding: 10px;}.low{filter: brightness(0.5);}.high{filter: brightness(1.5);}</style></head><body><div><img src="pic/mao.jpg"/></div><div><img class="low" src="pic/mao.jpg"/></div><div><img class="high" src="pic/mao.jpg"/></div></body></html>
26.3 投影drop-shadow
例子：投影
<!DOCTYPE html><html><head><meta charset="utf-8"><title>投影</title><style type="text/css">div{display: inline-block;}img{width: 200px;height: 200px;padding: 20px;}.shadow1{filter: drop-shadow(10px 10px);}.shadow2{filter: drop-shadow(10px 10px 10px gray);}</style></head><body><div><img src="pic/duo.jpg"/></div><div><img class="shadow1" src="pic/duo.jpg"/></div><div><img class="shadow2" src="pic/duo.jpg"/></div></body></html>
26.4 应用多个滤镜blend
例子：多个滤镜
<!DOCTYPE html><html><head><meta charset="utf-8"><title>投影</title><style type="text/css">div{display: inline-block;}img{width: 200px;height: 200px;padding: 20px;}.blend{filter:blur(1px) drop-shadow(0 10px 10px gray) opacity(0.8);/*opacity透明度*/}</style></head><body><div><img src="pic/duo.jpg"/></div><div><img class="blend" src="pic/duo.jpg"/></div></body></html>
27.混合模式mix-blend-mode
例子：混合模式：叠底
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{display: inline-block;}#up{position:absolute;left:10px;top:10px;mix-blend-mode: darken;}</style></head><body><div id="down"><img src="pic/duo.jpg"/></div><div id="up"><img src="pic/name.jpg"/></div></body></html>
加mix-blend-mode: darken后
学习视频：B站小甲鱼
笔记整理用作复习查看
