论坛 › 马黑黑教程专版 › 控制径向渐变radial-gradient的图案尺寸

马黑黑 发表于 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
那个很美的呢

感觉是一般般的吧

查看完整版本: 控制径向渐变radial-gradient的图案尺寸