关于渐变属性值的一些理解

我不是女神ヾ 2022-03-09 04:08 250阅读 0赞

首先，对于渐变（gradient）主要有两种方式，一种为线性渐变（linear-gradient），一种为径向渐（radical-gradient）  
本篇着重讨论线性渐变。  
渐变的语法：  
background: linear-gradient(direction, color-stop1, color-stop2, …);  
其中对于这个gradient轴也要有一定的了解（类似于弹性盒的主轴和副轴）  
![线性渐变轴][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70]但重点是要了解，添加角度后的变化  
![角度][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 1]0deg即是，从下至上，默认是180deg即从上至下。

下面是一些运用中的思考：

body div:nth-child(1)
    { 
    	width: 200px;
    	height: 200px;
    	background: linear-gradient(red 25% ,blue 25%);
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 2][]  
在bule后面再加入一个相同起点，不同颜色的属性，会造成其后来属性*覆盖*了前面相同位置的属性，如：

body div:nth-child(1)
    { 
    	width: 200px;
    	height: 200px;
    	background: linear-gradient(red 25% ,blue 25%,green 25%);
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 3]  
但是如果改为此种

body div:nth-child(1)
    { 
    	width: 200px;
    	height: 200px;
    	background: linear-gradient(red 25% ,blue 0%, blue 50%,green 0% ,green 50%);
    }

红色块，蓝色块，不会被覆盖，会出现这种效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 4]  
如果按之前的理解，从0~50%中是为蓝色，会覆盖前面的红色，但结果并没有。这是一个很值得思考的问题。

下面就试着讨论一下这个问题，举一个简单的例子：  
body div:nth-child(1)  
\{  
width: 200px;  
height: 200px;  
background: linear-gradient(red 25% ,blue 0%, blue 50%);  
\}  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 5]  
很显然，如果没有中间的0%去‘调和’两端，那么，中间会出现25%的渐变区域，但现在没有出现，那么这个0%到底起到了什么作用在中间。其中的逻辑先行这样理解：  
由于25%比0%大，则默认从0%到25%的这段里被红色占据，且这一规则后只需要再计算从25%到50%之间的颜色，即蓝色！

以下贴出来一些作品：（有一些小细节需要注意一下）  
1.  
![在这里插入图片描述][20190312115322496.png]

分析一下这个图片，在不用div嵌套的情况下，写出该效果。  
即，使用背景颜色写出，但要有一点需要注意。  
background-size与background-image想呼应调整，着重区分下其与整个背景色background的区别。  
此图即利用了该原理，使用一个size块，然后使其为一半的白色透明色（出现亮的效果，如果黑色透明色即为暗的效果），另一半与背景色块相同，即可出来此效果。  
*tips：别忘了加repeat这个属性值，不然达不到预期效果*  
其在给已存在背景色的块上，再需要蒙上一层颜色时候的作用十分优秀。

body div:nth-child(1)
    { 
    	width: 200px;
    	height: 200px;
    	background: #00B6ED;
    	background-size: 50px 50px;
    	background-image: linear-gradient(rgba(255,255,255,0.3) 50%,#00B6ED 50%);
    	background-repeat: no-repeat;
    }

由此块可以延伸出很多经典图形  
2.在基础上延伸一点的图形

body div:nth-child(4)
    { 
    	width: 200px;
    	height: 200px;
    	background: #00B6ED;
    	background-size: 50px 50px;
    	background-image:linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,  rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75% ,transparent 75%, transparent);
    }/* 在第三个图形上加入透明与颜色之间鲜明的分隔线的样式 tips：注意对于image应看做50 50的方格对待*/
    /* 相当于大块竖向分了四份,每一小份又分了四份，再调出想要的样式即可 */
    /* 白透明 透明 白透明 透明 */

对于其整体旋转为部分旋转所组成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70]: /images/20220309/07f37e72760f4b23aab6a58fe439dadf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 1]: /images/20220309/e3ec4cda45e54f18b4b7792b34158dbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 2]: /images/20220309/829045b7b1e44f6b97c67381f364cfcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 3]: /images/20220309/9f0e5d8480264898bc6e576777ef5f98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 4]: /images/20220309/ac53a074ba8742d0962f0106b7a7359d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 5]: /images/20220309/3d48de28519b467cac1b16521479b6f2.png
[20190312115322496.png]: /images/20220309/17327ecb97d2458c827c9ab8745c23c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjAxNDQz_size_16_color_FFFFFF_t_70 6]: /images/20220309/831913ddf5694853a646283321df5aeb.png