CSS3径向渐变radial-gradient实现波浪边框和内倒角

focus解释radial-gradient(circleatrighttop,#fff,#fff10px,transparent11px)样式的作用。Circle代表圆形渐变，简单点就是画一个圆。要画一个圆，你需要知道原点。右上角圆圈内的右上角为原点位置。这里的原点位置是相对于容器的坐标。right表示容器的最右边，top表示容器的顶边，也就是右上角。右上角圆圈后面的#fff,#fff10px,transparent11px是从原点开始的各种颜色渐变的长度。代码中第一个#fff#fff,#fff10px,transparent11px表示原点为#fff颜色，#fff10px表示距离原点半径10px为#fff颜色，transparent11px表示距离原点是10px到11px是透明色。由于没有设置其他颜色，所以距离原点11px后为透明色。总结一下，radial-gradient(circleatrighttop,#fff,#fff10px,transparent11px)就是以容器的右上角为原点画一个圆，半径10px以内是#fff颜色，半径大于10px的为透明色。这样就在右上角形成了一个内倒角。Radial-gradient(circleatrightbottom,#fff,#fff10px,transparent11px);不会解释。要在波浪边框上实现代码，只需添加一个css样式background:radial-gradient(circle,#fff,#fff4px,transparent5px);这里右上角没有字，说明原点在容器的中心，#fff，#fff4px，透明5px，说明颜色#fff在4px半径内，透明色在半径4px到5px，半径大于5px为透明色。所以在容器的中心有一个直径为8px的#fff圆圈（这里的容器是:after）。（背景蓝色为演示效果）Addbackground-size:10px10px;设置背景大小为10px宽10px高，这样就可以实现多个直径为8px的#fff圆圈。（背景蓝色为演示效果）left:-5px;向左偏移5px，这样只有一半的:after在.Circle,onlyquarterofcircleisinsidethecontainer实现波浪边框其实就是用#fff颜色绘制多个圆，只有一半的圆在容器内参考：10个demo实例学习CSS3radial-gradient如何实现纯码凹圆角