本文共 774 字，大约阅读时间需要 2 分钟。

html:

css:

div{            margin:auto;            width: 200px;            height: 200px;            background-image: linear-gradient(to right , pink, skyblue);            filter: blur(20px);        }

首先渐变就有很多种写法了，比如：

向右：background-image: linear-gradient(to right , pink, skyblue);

向左：background-image: linear-gradient(to left, pink, skyblue);

同理向上和向下：background-image: linear-gradient(to top, pink, skyblue);

background-image: linear-gradient(to bottom, pink, skyblue);

以及斜角或者自定角度：background-image: linear-gradient(to bottom right , pink, skyblue);

background-image: linear-gradient(45deg , pink, skyblue);

还可以自己加百分比：

background-image: linear-gradient(to right, pink 20%, skyblue 40%, rgba(255, 255, 0, 0.774) 60%);

想让背景模糊就加一条css：

filter: blur(20px);

最后：

渐变+模糊就完成了

转载地址：http://xzrgn.baihongyu.com/