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

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

上面的图案，红蓝两种颜色构成双色圆环，这是因为这两种颜色被严格控制了。其关键代码是：

   background-color: olive;
   background-image: radial-gradient(yellow, red 10px, blue 20px, transparent);

首先，背景色设为橄榄色，后面的渐变由于最后加入的颜色是透明色 transparent，所以橄榄色作为本色呈现在四周，从外往里的第二个颜色是绿色，代码里 blue 后面有一个数值，20px，就是它限制了它之前的红色 red 的范围，这个20px的意思是，蓝色从开始处（默认为盒子的圆心）的往外的第 20 px开始参与渐变，这就等于红色以及更里层的颜色都出不了 20px 这个范围，利用这一原理我们就可以控制图案的尺寸。红色 red 也跟着一个数值，10px，是它的渐变起始处，也是它里面颜色的渐变终止处。最里面的黄色 yellow 我们不设置数值，意思是最里边的颜色都归它，如果设置，则最里边的颜色是本色，黄色仅在它的起始处到终结处参与渐变。

还可以通过设置 background-size 的值来实现上面案例的样式如何呈现在背景上。我们这个div盒子是 400*300 的尺寸，假如我们需要显示四个上面的图案，则可以这样设置， background-size: 200px 150px;，这将如我们所愿：

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