马黑黑 发表于 2022-4-20 13:30

控制径向渐变radial-gradient的图案尺寸

<style>
.bg-box {
        margin: auto;
        width: 400px;
        height: 300px;
        background-color: olive;
        background-image: radial-gradient(yellow, red 10px, blue 20px, transparent);
}       
</style>

<p>radial-gradient径向渐变,以椭圆(默认)、圆的形状将颜色渐变向四周发散。通常,所有参与渐变的颜色是均匀分布的,不过可以通过控制让渐变的效果成为大小是我们所需的圆或椭圆。看下面的效果:<br><br></p>

<div class="bg-box"></div>

<p><br><br>上面的图案,红蓝两种颜色构成双色圆环,这是因为这两种颜色被严格控制了。其关键代码是:<br><br></p>
<pre>&nbsp; &nbsp;<span style="color: blue;">background-color</span>: olive;
&nbsp; &nbsp;<span style="color: blue;">background-image</span>: radial-gradient(yellow, red 10px, blue 20px, transparent);
</pre>
<p><br><br>首先,背景色设为橄榄色,后面的渐变由于最后加入的颜色是透明色 transparent,所以橄榄色作为本色呈现在四周,从外往里的第二个颜色是绿色,代码里&nbsp;blue&nbsp;后面有一个数值,20px,就是它限制了它之前的红色 red 的范围,这个20px的意思是,蓝色从开始处(默认为盒子的圆心)的往外的第 20&nbsp;px开始参与渐变,这就等于红色以及更里层的颜色都出不了 20px&nbsp;这个范围,利用这一原理我们就可以控制图案的尺寸。红色&nbsp;red&nbsp;也跟着一个数值,10px,是它的渐变起始处,也是它里面颜色的渐变终止处。最里面的黄色 yellow 我们不设置数值,意思是最里边的颜色都归它,如果设置,则最里边的颜色是本色,黄色仅在它的起始处到终结处参与渐变。<br><br></p>
<p>还可以通过设置&nbsp;background-size&nbsp;的值来实现上面案例的样式如何呈现在背景上。我们这个div盒子是 400*300&nbsp;的尺寸,假如我们需要显示四个上面的图案,则可以这样设置,&nbsp;<font color="#0000ff">background-size</font>: 200px 150px;,这将如我们所愿:<br><br></p>

<div class="bg-box" style="background-size: 200px 150px;"><br><br></div>

<p><br>当然,这效果不一定是我们所需要的,但它的确可以帮助我们理解渐变在背景中的呈现方式与背景大小 background-size 的设置是有关联的,不设置此值是默认是100%呈现,设置有此值则按设定的值平铺或称为repeat,除非我们定义了no-repeat——毕竟,渐变是以 image 的特征出现的,处理它和处理背景图片几乎没有什么区别。background-size的大小设定以及其它的相关会产生意想不到的神奇效果,大家可以试一试。</p>

红影 发表于 2022-4-20 16:44

看到这个,想起你前面一个帖子里的雪花了{:4_187:}

红影 发表于 2022-4-20 16:45

“渐变是以 image 的特征出现的,处理它和处理背景图片几乎没有什么区别。”

嗯嗯。记下了。

这个渐变,给它设置多大,最外那层就扩展到多大的吧。

红影 发表于 2022-4-20 16:49

“后面的渐变由于最后加入的颜色是透明色 transparent,所以橄榄色作为本色呈现在四周”
如果不加transparent,外面就全被blue覆盖了吧。

谢谢黑黑,辛苦了。学习{:4_187:}

加林森 发表于 2022-4-20 17:09

来学习

马黑黑 发表于 2022-4-20 18:21

红影 发表于 2022-4-20 16:44
看到这个,想起你前面一个帖子里的雪花了

嗯,就是那样子弄来的,虽然弄得不好

马黑黑 发表于 2022-4-20 18:21

红影 发表于 2022-4-20 16:45
“渐变是以 image 的特征出现的,处理它和处理背景图片几乎没有什么区别。”

嗯嗯。记下了。


大概是酱紫的

马黑黑 发表于 2022-4-20 18:22

红影 发表于 2022-4-20 16:49
“后面的渐变由于最后加入的颜色是透明色 transparent,所以橄榄色作为本色呈现在四周”
如果不加transpar ...

{:4_180:}

马黑黑 发表于 2022-4-20 18:22

加林森 发表于 2022-4-20 17:09
来学习

{:4_190:}

加林森 发表于 2022-4-20 18:24

马黑黑 发表于 2022-4-20 18:22


{:4_191:}

马黑黑 发表于 2022-4-20 18:24

加林森 发表于 2022-4-20 18:24


到时间喝酒了

加林森 发表于 2022-4-20 18:26

马黑黑 发表于 2022-4-20 18:24
到时间喝酒了

好的,你慢慢喝。{:4_191:}

马黑黑 发表于 2022-4-20 18:58

加林森 发表于 2022-4-20 18:26
好的,你慢慢喝。

{:4_190:}

加林森 发表于 2022-4-20 19:11

马黑黑 发表于 2022-4-20 18:58


谢茶

千羽 发表于 2022-4-20 19:19

黑黑老师又出新教程了,棒棒哒{:4_187:}

樵歌 发表于 2022-4-20 20:02

这瞎了俺的小眼睛,你要陪起{:4_173:}

马黑黑 发表于 2022-4-20 20:09

千羽 发表于 2022-4-20 19:19
黑黑老师又出新教程了,棒棒哒

晚上好,请用茶
{:4_180:}

马黑黑 发表于 2022-4-20 20:09

樵歌 发表于 2022-4-20 20:02
这瞎了俺的小眼睛,你要陪起

请勿直视

红影 发表于 2022-4-20 20:10

马黑黑 发表于 2022-4-20 18:21
嗯,就是那样子弄来的,虽然弄得不好

那个很美的呢{:4_187:}

马黑黑 发表于 2022-4-20 20:10

红影 发表于 2022-4-20 20:10
那个很美的呢

感觉是一般般的吧
页: [1] 2
查看完整版本: 控制径向渐变radial-gradient的图案尺寸