CSS linear-gradient属性案例详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">一、介绍</a></li><li><a href="#_label1">二、使用技巧</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_0">2.1 方格背景</a></li><li><a href="#_lab2_1_1">2.2 棋盘效果</a></li></ul></ul></div><p>linear-gradient是css3的一个属性，功能强大，但是因为使用的灵活性，让没接触过的人感觉不好下手，下面来一起学习一下：</p><p class="maodian"><a name="_label0"></a></p><h2>一、介绍</h2>
<blockquote>
<p>linear-gradient 是一种实现线性渐变的属性，顾名思义，它的特点的是控制渐变，特点是线性的进行控制。</p>
</blockquote>
<p>属性介绍：</p>
<blockquote>
<p>linear-gradient([ [ [ | to || ],]? [, ]+);</p>
</blockquote>
<p>可以简化为：</p>
<blockquote>
<p>1.关于控制线性变化的参数可以是多个，以逗号分隔<br />
2.每一个控制线性变化的单元有两部分组成<br />
3.第一部分是线性变化的方向，有两种形式：第一种形式是是角度，顺时针增加，比较灵活；第二种形式是包含to和两个关键词：第一个指出水平位置left or right，第二个指出垂直位置top or bottom。关键词的先后顺序无影响，且都是可选的。to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。这种相对于角度的设置，比较单一，只能设置8个方向（两个是夹角方向）<br />
4.第二部分是变化的颜色，默认是渐变过程平分整个区域，可以以颜色 + 停止点的形式来设置某一个颜色变化的位置区间，这个也是支持多个，理论上没有限制。</p>
</blockquote>
<p>即linear-gradient(角度或者(to + 方向)， 颜色单元);</p>
<p class="maodian"><a name="_label1"></a></p><h2>二、使用技巧</h2>
<p class="maodian"><a name="_lab2_1_0"></a></p><h3>2.1 方格背景</h3>
<p>线性渐变配合着backage-size有着意想不到的效果：</p>
<p style="text-align: center;"><img src="https://img.jbzj.com/file_images/article/202108/2021081815264721.jpg" alt="在这里插入图片描述" /></p>
<p>实现：</p>
<blockquote>
<p>background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%),<br />
linear-gradient(rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0) 10%);<br />
background-size: 30px 30px;<br />
background-color: white;<br />
height: 200px;</p>
</blockquote>
<p class="maodian"><a name="_lab2_1_1"></a></p><h3>2.2 棋盘效果</h3>
<p style="text-align: center;"><img src="https://img.jbzj.com/file_images/article/202108/2021081815264722.png" alt="在这里插入图片描述" /></p>
<p>实现：</p>
<blockquote>
<p>background-image: linear-gradient(45deg,#ccc 25%,transparent 0),<br />
linear-gradient(45deg,transparent 75%,#ccc 0),<br />
linear-gradient(45deg,#ccc 25%,transparent 0),<br />
linear-gradient(45deg,transparent 75%,#ccc 0);<br />
background-position: 0 0,-15px 15px,15px -15px,30px 30px;<br />
background-size: 30px 30px;<br />
background-color: white;</p>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="external nofollow"rel="stylesheet" />
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css" rel="external nofollow"rel="stylesheet" /></blockquote>
頁:
[1]