text.html

 
<p class="zw">线性渐变是最常见和有用的渐变类型，它由一个渐变轴和两种或两种以上颜色组成。这个轴可以水平、垂直或者以任何角度来贯穿元素背景。这个概念和CSS渐变语法并不难，如果你对Photoshop或者Sketch很熟悉，就更不在话下了。</p> 
<p class="zw">首先我们用垂直的线性渐变来实现一个按钮，从Get Hardboiled网站的品牌颜色上取两个色值来做渐变。</p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">我们可以使用十六进制、RGB、RGBa、HSL和HSLa来定义色值，然后用逗号分隔开。</p> 
<p class="zw">下一步，我们将指定渐变的方向，简单来说，就是我们希望渐变到（<code>to</code>）哪里结束，可以是左边或右边，也可以是底部或者顶部。我们不需要指定渐变的起点，只需要声明结束的位置即可。</p> 
<p class="zw">在第一个例子中，渐变在顶部结束。</p> 
<p class="图"><img alt="9471.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/156.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
to top, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">下面这个渐变在右边结束。</p> 
<p class="图"><img alt="9482.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/157.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
to right, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">下一个渐变是在左边结束。</p> 
<p class="图"><img alt="9493.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/158.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
to left, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">这个<code>to</code>语法，不仅对元素的顶部、右侧、底部或者左侧有效；它也可以指定元素的四个角来创建对角线的渐变。</p> 
<p class="zw">下面这个渐变在右下角结束。</p> 
<p class="图"><img alt="9511.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/159.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
to bottom right, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">下面的渐变在左下角结束。</p> 
<p class="图"><img alt="9524.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/160.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
to bottom left, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">这个渐变在左上角结束。</p> 
<p class="图"><img alt="9535.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/161.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
to top left, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">此渐变的最终版结束于右上角。</p> 
<p class="图"><img alt="9546.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/162.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
to top right, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">当需要指定精确的渐变角度时，我们可以使用相同的方式，用角度值来代替<code>to</code>。</p> 
<p class="zw">下面的例子使用了<code>30deg</code>的渐变。</p> 
<p class="图"><img alt="9557.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/163.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
30deg, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">如果有需要，我们还可以使用负值来实现反向的渐。</p> 
<p class="图"><img alt="9568.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/164.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
-30deg, 
#fed46e, 
#ba5c61); }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_255">添加颜色节点</h3> 
<p class="zw">简单的渐变是由两个色值来创建的，但是我们的设计经常需要包含一个或多个颜色的复杂渐变。什么是颜色节点？现在回到我们熟悉的图像处理软件中，使用Sketch，我们可以在调色板中双击，为渐变添加色值。</p> 
<p class="图"><img alt="1610.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/165.jpg"></p> 
<p class="图题">在Sketch中添加颜色节点。</p> 
<p class="zw">为CSS渐变指定一个或者多个颜色节点的时候，浏览器会平滑地把它们融合在一起。</p> 
<p class="zw">在下一个案例中，这个线性渐变从顶部开始，由红变黄，直到底部以蓝色结束。</p> 
<p class="图"><img alt="9615.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/166.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
#b1585d, 
#fed46e, 
#388fa2); }</code></pre> 
<p class="zw">由于我们还没有指定颜色融合的位置，那么它们会均匀地融合在渐变轴上。如果想精确地控制颜色的融合位置，那么可以指定颜色节点在我们希望的位置开始融合。在这个例子中，我们指定第二个节点，即黄色从渐变轴的20%高度的位置开始融合。</p> 
<p class="zw">仔细看，你会发现黄色值旁边出现了一个<code>20%</code>。</p> 
<p class="图"><img alt="9637.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/167.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
#b1585d, 
#fed46e 20%, 
#388fa2); }</code></pre> 
<p class="zw">我们可以为渐变中的任何一个颜色节点指定位置。接下来，使用同样的方法，指定蓝色在渐变轴60%高度的位置开始融合。</p> 
<p class="图"><img alt="9649.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/168.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
#b1585d, 
#fed46e 20%, 
#388fa2 60%); }</code></pre> 
<p class="zw">到目前为止的每一个例子中，我们都是让颜色在渐变轴上逐渐融合。但有时我们也需要一个突然的颜色变化。CSS渐变很容易就可以实现。给两个颜色设置相同的节点位置，就可以实现这种颜色的突然变化。下面这个例子中，我们将其设置为<code>40%</code>。</p> 
<p class="图"><img alt="9661.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/169.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : linear-gradient( 
#b1585d, 
#fed46e 40%, 
#388fa2 40%); }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_256">线性渐变实战</h3> 
<p class="zw">是时候实践一下了。让我们来创建一个网站上的便签效果，它可以用来充当网站的等待页面。我们的HTML标签既简洁，又专业，<code>article</code>元素只包含了标题和列表。</p> 
<pre class="代码无行号"><code><article> 
   <h1>Back soon!</h1> 
   <ul> 
      <li><del>Gone for smokes</del></li> 
      <li><del>Getting booze</del></li> 
      <li>On a job (yeah, really)</li> 
   </ul> 
</article></code></pre> 
<p class="zw">首先给<code>article</code>元素定义一个尺寸、一点内边距值和一个实色背景。如果有些浏览器无法渲染渐变背景，那么用户就会看到这个背景色。</p> 
<pre class="代码无行号"><code>article { 
width : 280px; 
height : 280px; 
padding : 22px; 
background-color : #fed46e; 
box-sizing : border-box; 
text-align : center; }</code></pre> 
<p class="图"><img alt="9700.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/170.jpg"></p> 
<p class="zw">现在，添加一个对角线渐变，以便让便签更真实。使用两种颜色，渐变轴指向便签的右上角，并让颜色在<code>60%</code>高度的位置开始融合。</p> 
<pre class="代码无行号"><code>article { 
background-image : linear-gradient( 
to top right, 
#fed46e 60%, 
#bf9f53); }</code></pre> 
<p class="图"><img alt="9741.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/171.jpg"></p> 
<p class="zw">支持CSS渐变的浏览器，不管需不需要厂商前缀，都会正常地渲染它。如果有些浏览器无法渲染渐变背景，那么用户就会看到实色背景。</p> 
<p class="zw">最后，为了给便签增添厚重感，我们为它巧妙地添加一点阴影。</p> 
<pre class="代码无行号"><code>article { 
box-shadow : 0 2px 5px 
rgba(0,0,0,.5); }</code></pre> 
<p class="图"><img alt="9753.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/172.jpg"></p>