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()

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

例子：曲线运动

<!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);

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站小甲鱼

笔记整理用作复习查看

Web前端开发之CSS学习笔记11—文本格式和动画设计相关推荐

Web前端开发之CSS学习笔记8—居中和自适应
目录 1.居中 1.1水平居中 1.2垂直居中 2.单列布局自适应 3.双列布局自适应 3.1双列自适应 3.2半边固定半边自适应 3.三列布局自适应 3.1浮动法 3.2绝对定位法 3.3margi ...
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
尚硅谷web前端工程师1000集学习笔记11
一个练习 <!doctype html> <html> <head> <meta charset="utf-8" ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
【转载】前端开发之CSS兼容写法经验总结
为什么80%的码农都做不了架构师?>>> 前端开发之CSS兼容写法经验总结技术 maybe yes 发表于2014-11-23 22:47 原文链接 : http://blog ...
正则至少一个数字_好程序员web前端培训分享JavaScript学习笔记之正则
好程序员web前端培训分享JavaScript学习笔记之正则,正则表达式,又名 "规则表达式" 由我们自己来书写 "规则",专门用来检测字符串是否符合 &q ...
date javascript 时区_第23节 Datejs 日期库-Web前端开发之Javascript-零点程序员-王唯
Datejs 是一个开源的JavaScript库,用来解析.格式化和处理日期数据,支持多种语言的日期格式处理:官网:www.datejs.com/ Moment.js 是一个简单易用的轻量级JavaS ...
Swift网络开发之NSURLSession学习笔记
为什么80%的码农都做不了架构师?>>> Swift网络开发之NSURLSession学习笔记先上效果图: 功能: -单个任务下载 -暂停下载任务 -取消下载任 ...

Web前端开发之CSS学习笔记11—文本格式和动画设计

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

Web前端开发之CSS学习笔记11—文本格式和动画设计相关推荐

最新文章

热门文章