径向渐变加阴影html,css – 如何添加阴影以仅在边缘处反转c径向渐变？

由于您已经使用径向渐变来创建边角勺形状,因此只需在两者之间添加一个额外的颜色停止位置即可产生阴影效果.

在下面的代码段中,我们使用以下渐变(对于每个角落)：

radial-gradient(circle at 0 100%,#AAA 104px,#f7f6f6 105px)

该梯度可以解释如下：

>径向渐变的颜色为rgba(204,0),距圆的中心半径为100px.颜色是透明色,产生反C切(或铲)的效果.

>从100px半径到104px半径,颜色逐渐从rgba(204,0)变为#AAA(灰色),这会产生类似阴影的效果.您可以通过更改此颜色值来更改阴影的颜色.

>在104px和105px半径之间,渐变的颜色从#AAA变为#f7f6f6,这使得它看起来颜色正在平滑变化而不是硬停.

div {

background: -moz-radial-gradient(0 100%,#f7f6f6 105px),#f7f6f6 105px);

background: -webkit-radial-gradient(0 100%,#f7f6f6 105px);

background: radial-gradient(circle at 0 100%,radial-gradient(circle at 100% 100%,radial-gradient(circle at 100% 0,radial-gradient(circle at 0 0,#f7f6f6 105px);

background-position: bottom left,top left;

background-size: 50% 50%;

background-repeat: no-repeat;

height: 300px;

width: 500px;

}

如果要生成类似于注释中提供的图像的输出,请查看下面的代码段.此代码段的工作方式与上面解释的相同：

div {

background: -moz-radial-gradient(0 100%,rgb(168,168,168) 100px,rgb(139,139,139) 102px,139) 106px,rgb(246,246,246) 106px),246) 106px);

background: -webkit-radial-gradient(0 100%,246) 106px);

background: radial-gradient(circle at 0 100%,246) 106px);

background-position: bottom left,top left;

background-size: 50% 50%;

background-repeat: no-repeat;

height: 300px;

width: 600px;

}