1、图片文字盘绕
shape-outside 是一个容许设置形态的 CSS 属性。它还有助于定义文本流动的区域
.any-shape { width: 300px; float: left; shape-outside: circle(50%);}圆形：shape-outside: circle(50%); //第一个值代表半径椭圆：shape-outside: ellipse(60px 80px); //第一个值代表半径；第二个值代表半径多边形：shape-outside: polygon(0 0,100% 100%,0 100%);（三角形）shape-outside: polygon(100px 0,200px 60px,200px 120px,100px 200px,0 120px,0 60px);（六边形）//起码3个值，也就是说，至多要3个点组成一个三角形，每个点有x，y方向挪动的两个值（均从左上方开始挪动）2、:where() 简化代码
原：.parent div,.parent .title,.parent #article { color: red;}改：.parent :where(div, .title, #article) { color: red;}3、实现平滑滚动
但凡须要滚动的中央都加一句scroll-behavior:smooth 来晋升滚动体验！a、常常应用的锚点定位性能就有了平滑定位性能，如<a href="#">返回顶部</a>b、全局css中也倡议增加html, body { scroll-behavior:smooth; }4、背景混合模式
.blend-2 { background-image: url(../xx/xxx.jpg); width: 100vw; height: 500px; background-color: #20126f; background-size: cover; background-blend-mode: overlay;}background-blend-mode分为如下几种模式 normal：默认值。设置失常的混合模式multiply：正片叠底模式screen：滤色模式overlay：叠加模式darken：变暗模式lighten：变亮模式color-dodge：色彩减淡模式saturation：饱和度模式color：色彩模式luminosity：亮度模式5、图像填充文字效果
background-clip 属性规定背景的绘制区域border-box：以盒边界来裁剪padding-box：以内边距为边界来裁剪content-box：以内容区域来裁剪回归主题：background-clip: text; 顾名思义 就是 以文字的范畴来裁剪背景图片h1 { background-image: url('./flower.jpg'); background-clip: text; -webkit-background-clip: text; color: transparent; background-color: white;}6、文字描边成果
div{ color: #fff; font-size: 80px; -webkit-text-stroke: 2px blue; text-stroke: 2px blue;}<div>这是文本。</div>text-stroke 属性值中有两局部，第一局部是文字描边的宽度，第二局部是文字描边的色彩。7、将文本设为大写或小写
/* 大写 */.upper { text-transform: uppercase;}/* 小写 */.lower { text-transform: lowercase;}<div class="upper"> fdsdsdsd</div><div class="lower"> DFDSWRREE</div>8、暂停/播放伪类
:paused 伪类能够为处于暂停状态的媒体元素设置款式video:paused { opacity: 0.6;}须要留神，目前仅 Safari 反对该伪类:paused9、毛玻璃特效
.login { backdrop-filter: blur(5px);}其余参数：blur()含糊: blur(5px)亮度: brightness(1.4)对比度: contrast(2)投影: drop-shadow(4px 4px 8px #fff)灰度: grayscale(60%)色调变动: hue-rotate(66deg)反相: invert(60%)透明度: opacity(50%)饱和度: saturate(250%)褐色: sepia(70%)10、自定义光标
body{ cursor: url("path-to-image.png"), auto;}cursor 内置属性：default 默认光标（通常是一个箭头）auto 默认。浏览器设置的光标crosshair 光标出现为十字线pointer 光标出现为批示链接的指针（一只手）move 此光标批示某对象可被挪动e-resize 此光标批示矩形框的边缘可被向右（东）挪动ne-resize 此光标批示矩形框的边缘可被向上及向右挪动（北/东）nw-resize 此光标批示矩形框的边缘可被向上及向左挪动（北/西）n-resize 此光标批示矩形框的边缘可被向上（北）挪动se-resize 此光标批示矩形框的边缘可被向下及向右挪动（南/东）sw-resize 此光标批示矩形框的边缘可被向下及向左挪动（南/西）s-resize 此光标批示矩形框的边缘可被向下挪动（南）w-resize 此光标批示矩形框的边缘可被向左挪动（西）text 此光标批示文本wait 此光标批示程序正忙（通常是一只表或沙漏）help 此光标批示可用的帮忙（通常是一个问号或一个气球11、裁剪各种形态
div { height: 150px; width: 150px; background-color: crimson;}语法详解1、矩形：inset() : 定义一个矩形 。留神，定义矩形不是rect，而是 insetinset()能够传入5个参数，别离对应top,right,bottom,left的裁剪地位,round radius（可选，圆角）//示例clip-path: inset(2em 3em 2em 1em round 2em);2、圆形：circle() : 定义一个圆circle()能够传人2个可选参数；a. 圆的半径，默认元素宽高中短的那个为直径，反对百分比b. 圆心地位，默认为元素中心点//示例clip-path: circle(30% at 150px 120px);3、椭圆：ellipse() : 定义一个椭圆 ellipse()能够传人3个可选参数；a. 椭圆的X轴半径，默认是宽度的一半，反对百分比b. 椭圆的Y轴半径，默认是高度的一半，反对百分比c. 椭圆核心地位，默认是元素的中心点//示例clip-path: ellipse(45% 30% at 50% 50%);4、多边形polygon() : 定义一个多边形 //语法polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )//阐明<fill-rule>可选，示意填充规定用来确定该多边形的外部。可能的值有nonzero和evenodd,默认值是nonzero前面的每对参数示意多边形的顶点坐标（X,Y），也就是连接点//示例clip-path: polygon(50% 0,100% 50%,0 100%);其余图形：矩形：clip-path: inset(5% 20% 15% 10%)三角形：clip-path: polygon(50% 0%, 0% 100%, 100% 100%)菱形：clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)梯形：clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)平行四边形：clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)五边形：clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)六边形：clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)七边形：clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)八边形：clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)斜角：clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)槽口：clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)左箭头：clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)右箭头：clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)星星：clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)十字架：clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%)叉号：clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);对话框：clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)》》》后续迭代