用shape-outside实现文字环绕

• 实现效果：

• 介绍：shape-outside是让文字从图片外部开始环绕，以及设置图片的形状。

• 函数定义：

1. circle(size at x y);用于制作圆形size可以是%,px,rem,v*
2. ellipse(size);用于制作椭圆形
3. inset(top,right,bottom,left,round);矩形 前四个参数可缩写如padding格式
4. polygon(x1 y1,x2 y2,x3 y3);多边形
5. url();从图像中提取形状，图像限于透明图片

• Html代码：

注意：clip-path 属性可以将元素裁剪为基本形状或 SVG 源。

CSS色彩渐变

• 介绍：conic-gradient() 函数，创建一个由渐变组成的图像。

  圆锥渐变是颜色过渡围绕中心点旋转，而不是从中心向外辐射。创建圆锥渐变至少需要设置两个色标。

• 实现效果：

• Html代码：

• 实现效果：

• html代码：

注意：red 0deg,red 30deg指的是红色是从多少度到多少度。

指定背景如何附着在容器上

• 介绍：使用background-attachment属性。

• 属性值：

值

描述

scroll

背景图片随着页面的滚动而滚动，这是默认的。

fixed

背景图片不会随着页面的滚动而滚动。

local

背景图片会随着元素内容的滚动而滚动。

initial

设置该属性的默认值。

inherit

指定 background-attachment 的设置应该从父元素继承。

长度单位vh

• 介绍：实现根据视口的高度，自适应某一部分的高度，表示相对视口高度。视口被均分为100单位的vh，即1vh = 1% * 视口高度。可以用来解决主体内容不足以撑起视口的剩余高度时，页面底部留白太多的问题。

  　　如：width:10px，可改成width:10vh。