text.html

 
<p class="zw">在本书第1版中，径向渐变部分是一笔带过的，因为当时浏览器厂商还不同意它的语法。我写道：</p> 
<p class="zw"><span style="font-family: Times New Roman,楷体_GB2312">“围观每一次标准制订之争，在CSS工作组的Twitter上跟帖，或者关注他们博客上的每一次聚会，那种感觉很赞，不是吗？”</span></p> 
<p class="zw">幸运的是，这种斗争已经离我们远去，并且所有的现代浏览器都已经完全支持了所有类型的渐变。</p> 
<h3 class="sigil_not_in_toc" id="nav_point_258">定义渐变类型</h3> 
<p class="zw">和线性渐变一样，我们依然可以把径向渐变当作<code>background-image</code>属性的值。在这个例子中，我们依然使用两种颜色，不过这次我们指定的渐变类型是径向。</p> 
<p class="图"><img alt="9922.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/173.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">在这个最简单的径向渐变中，第一种颜色从元素的中心开始，与第二种颜色慢慢融合，一直延伸到最远的边缘。这意味着，如果元素的宽度和高度不相同，那么这个渐变将会是一个椭圆，这是径向渐变默认的形状。</p> 
<p class="zw">如果想让镜像渐变变为圆形，就要在定义中添加<code>circle</code>关键字，来覆盖默认的椭圆形，并用逗号和颜色值分隔开。</p> 
<p class="图"><img alt="9934.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/174.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">仔细看最后一个例子，你应该注意到了，渐变圆延伸到了元素的边缘，这意味着我们看到的是一个不完整的圆。如果需要设计一个完整的渐变圆的效果，我们可以在<code>circle</code>这行添加<code>closest-side</code>关键字。</p> 
<p class="图"><img alt="9946.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/175.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle closest-side, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">当然，我们还可以使用其他关键字来决定渐变在哪条边或者哪个角结束。</p> 
<p class="zw">这个圆在离中心最近的一个角结束。</p> 
<p class="图"><img alt="9959.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/176.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle closest-corner, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">这个是在最远的角结束。</p> 
<p class="图"><img alt="9971.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/177.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle farthest-corner, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">而这个是在最远的那条边结束。</p> 
<p class="图"><img alt="9983.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/178.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle farthest-side, 
#fed46e, 
#ba5c61); }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_259">改变渐变的原点</h3> 
<p class="zw">默认情况下，径向渐变使从元素背景的中心将颜色融合后向外延伸，但是在很多场景下我们需要改变默认方式。使用<code>at</code>关键字，后面跟一些位置或者其他的一些值就完全可以做到。</p> 
<p class="zw">这个渐变从元素背景的左上角开始。</p> 
<p class="图"><img alt="9994.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/179.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle at top left, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">这个渐变从左下角开始。</p> 
<p class="图"><img alt="10008.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/180.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle at bottom left, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">我们同样可以让渐变从右上角开始。</p> 
<p class="图"><img alt="10030.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/181.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle at top right, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">当然，还可以从右下角开始渐变。</p> 
<p class="图"><img alt="10042.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/182.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle at bottom right, 
#fed46e, 
#ba5c61); }</code></pre> 
<p class="zw">还想把渐变玩出花样？你很幸运，除了<code>at</code>关键字，你还可以精确地使用CSS单位来控制渐变的原点位置，包括像素和百分比。这样，就能完美地实现响应式设计。</p> 
<p class="zw">我们把原点定位在距离元素中心<code>80px</code>、距离顶部<code>30px</code>的位置。</p> 
<p class="图"><img alt="10083.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/183.jpg"></p> 
<pre class="代码无行号"><code>div {
background-image : radial-gradient(
circle at 80px 30px,
#fed46e,
#ba5c61); }</code></pre> 
<p class="zw">如果你希望渐变的中心在元素本身以外，你可以使用负值。在这个例子中，原点在元素外面距离顶部<code>30px</code>的位置。</p> 
<p class="图"><img alt="10102.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/184.jpg"></p> 
<pre class="代码无行号"><code>div {
background-image : radial-gradient(
circle at 80px -30px,
#fed46e,
#ba5c61); }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_260">添加颜色节点</h3> 
<p class="zw">和线性渐变一样，简单的径向渐变也是由两种颜色实现的。但是更为复杂的渐变往往需要包含一个或多个颜色节点。下一步，我们将为上一个渐变添加第三种颜色。</p> 
<p class="图"><img alt="10114.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/185.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle at 80px -30px, 
#b1585d, 
#fed46e, 
#388fa2); }</code></pre> 
<p class="zw">由于我们还没有指定颜色融合的位置，那么它们此时会均匀地融合在渐变轴上。如果想精确地控制颜色的融合位置，那么可以指定颜色节点在我们希望的位置开始融合。</p> 
<p class="图"><img alt="10128.jpg" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/186.jpg"></p> 
<pre class="代码无行号"><code>div { 
background-image : radial-gradient( 
circle at 80px -30px, 
#b1585d 30%, 
#fed46e 30%, 
#fed46e 40%, 
#388fa2 40%); }</code></pre> 
<h3 class="sigil_not_in_toc" id="nav_point_261">抢眼的径向渐变</h3> 
<p class="zw">是时候让径向渐变露一手了。结合径向渐变和RGBa来实现一个聚光灯照在办公室门上的效果。首先使用一个深色背景和木纹材质的背景图像做出门的造型。</p> 
<pre class="代码无行号"><code>.hb-about { 
background-color : #332115; 
background-image : url(about-wood.jpg); 
background-position : 50% 50%; 
min-height : 100vh; }</code></pre> 
<p class="图"><img alt="1632.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/187.jpg"></p> 
<p class="图题">这个漂亮的木纹门板给访客带来了良好的第一印象。我们也欢迎使用低端浏览器的用户来访。</p> 
<p class="zw">因为CSS渐变使用的是<code>background-image</code>属性，所以我们可以在多个背景图像中使用它们，包括位图或者其他CSS渐变。首先，我们在<code>background-image</code>上添加一个径向渐变。因为是先定义的这个渐变，所以它将出现在木纹图案上面。</p> 
<pre class="代码无行号"><code>.hb-about { 
background-image : url(about-wood.jpg); 
background-position : 50% 50%; }</code></pre> 
<p class="zw">然后给这个径向渐变加上<code>background-position</code>和<code>background-repeat</code>属性值，并用逗号分隔它们，来修饰木纹背景。</p> 
<pre class="代码无行号"><code>.hb-about { 
background-image : 
radial-gradient( 
circle at bottom left, 
transparent, 
rgba(0,0,0,.8)), 
url(about-wood.jpg); 
background-position : 0 100%, 50% 50%; 
background-repeat : no-repeat, repeat; }</code></pre> 
<p class="图"><img alt="1633.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/188.jpg"></p> 
<p class="zw">这扇门虽说是做好了，但是我们要问问自己，这样就足够专业和老到了么。虽然这个木纹背景经过优化后只有50Kb，但是这仍然造成了一个额外的HTTP请求。</p> 
<p class="zw">专业的CSS应该是做到淋漓尽致，所以我们用一个半透明的线性渐变，结合<code>background-image</code>属性来代替那张位图。</p> 
<pre class="代码无行号"><code>.hb-about { 
background-image : 
linear-gradient( 
90deg, 
#472615 50%, 
transparent 50%); 
background-size : 6px; }</code></pre> 
<p class="图"><img alt="1634.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/189.jpg"></p> 
<p class="图题">这个木纹是一个从上到下、从棕色到透明的渐变。这两种颜色是在渐变轴50%高度位置上开始融合的，形成了一条锐利的线，所以不受背景尺寸的影响。</p> 
<p class="zw">这种渐变形成了竖状条纹，但是看起来还并不太像木纹，所以我们使用另一种渐变——重复。</p>