CSS实用的几个新特性

shape-outside

shape-outside的CSS属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框

文字环绕效果：

	.shape {
		  float: left;
		  width: 150px;
		  height: 150px;
		  background-color: maroon;
		  border-radius: 50%;
		  margin-right: 10px;
		/* clip-path: polygon(0 0, 150px 150px, 0 150px);
		  shape-outside: polygon(0 0, 150px 150px, 0 150px);
		  shape-margin: 20px; */
		  shape-outside: circle(50% at 50% 50%);
		}


<section>
		<div class="shape"></div>
		We are not quite sure of any one thing in biology; our knowledge of geology
		is relatively very slight, and the economic laws of society are
		uncertain to every one except some individual who attempts to set them
		forth; but before the world was fashioned the square on the hypotenuse
		was equal to the sum of the squares on the other two sides of a right
		triangle, and it will be so after this world is dead; and the inhabitant
		of Mars, if one exists, probably knows its truth as we know it.
</section>

shape-outside: circle(50% at 20px 30px); 参数：圆的半径，圆的中心点位置

mask

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

实现效果，鼠标经过为元素添加边框。

    .bg{
        position: relative;
        width: 150px;
        height: 150px;	
        transition: all .4s ease;
        border: 1px solid transparent;


    }
.bg:hover{
            cursor: pointer;
            border: 1px solid #666;
/* background: 
			linear-gradient(to left, var(--borderColor), var(--borderColor)) left top no-repeat, 
			linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left top no-repeat, 
			linear-gradient(to left, var(--borderColor), var(--borderColor)) right top no-repeat, 
			linear-gradient(to bottom, var(--borderColor), var(--borderColor)) right top no-repeat, 
			linear-gradient(to left, var(--borderColor), var(--borderColor)) left bottom no-repeat, 
			linear-gradient(to bottom, var(--borderColor), var(--borderColor)) left bottom no-repeat, 
			linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat, 
			linear-gradient(to left, var(--borderColor), var(--borderColor)) right bottom no-repeat;
			background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px;
			transition: all .4s ease;

background:
			conic-gradient( at 10px 10px, transparent 75%,  var(--borderColor) 75% 100%) 0 0 / calc(100% - 10px) calc(100% - 10px);
				 */

     // 利用mask 和锥形渐变实现
    -webkit-mask:  conic-gradient( at 20px 20px, transparent 75%, var(--borderColor) 75% 100%) 0 0 / calc(100% - 20px) calc(100% - 20px);
				
			
		}

以上代码利用线性渐变也可实现，但使用mask遮罩和锥形渐变更简单

mix-blend-mode

mix-blend-mode CSS 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode 使多重叠元素的颜色发生混合，包括元素与元素，元素与图片

background-blend-mode 使得多个背景发生混合，包括背景图与背景图，背景图与背景色

isolation: isolate 可以创建层叠上下文，就可以阻断mix-blend-mode，使多个元素能分组进行混合，不干扰

使用场景

1. 图片后方的元素能透视出来，不被遮挡

可以用 mix-blend-mode: screen;

2. 文字反色效果

可以用 mix-blend-mode: difference;

3. 文字镂空

上层文字，要透视后面的图片

可以用 mix-blend-mode: screen;

4. 文字背景

就是图片只显示文字的部分，与background-clip: text类似

可用 mix-blend-mode: lighten

黑色字体在上方，下面浅色的图片就会透视出来

5. 图标变色

图标可以变为渐变色或者纯色，使用黑色图标，lighten混合可以将浅的渐变色显示出来，加上position变化，还可以实现滑动的渐变色效果

6. logo图标去白底

img { mix-blend-mode: multiply; filter: contrast(2); filter:contrast(2)来增加徽标的对比度, }

更多详见MDN: developer.mozilla.org/zh-CN/docs/…

更多效果及快速在线生成器请前往：

小结：

css无限可能，学习简单，使用简单，便捷， 感兴趣的同学请前往：www.yuque.com/donsoft/qkn… 了解更多在线生成器，提高工作效率，希望对你有帮助！