CSS グラデーションの説明_html/css_WEB-ITnose

現在、デザイナーの学生の身長はますます高くなり、単色の背景では人々の物質的および文化的ニーズに対応できなくなりました o(╯□╰)o。それを復元するにはどうすればよいですか? デザイナーは数十 K の写真を直接投げました。 。 。

幸いなことに、CSS は第 3 世代です。今回はCSS3のGradient(/ˈgreɪdɪənt/)の使い方についてお話します。

「使用できますか?」という観点から、最新のブラウザーは優れたサポートを備えており、特にモバイル デバイスではそれをサポートしていないブラウザーについては、単色を使用したダウングレード ソリューションが以下に提供されます。

しかし、さまざまな互換性の問題は確かに避けられません。Gradient には Flex ボックスと同じ 3 つの文法規則があり、それらは大きく異なります。 。 。

議論を簡単にするために、最新の構文のみを取り上げます (基本的に、多数の新しいブラウザーをカバーできます)。古い構文ルールと IE などのさまざまなブラウザの互換性方法については、参考記事の 2 と 3 を参照してください。また、Gradient Generator や autoprefixer を使用してコードを自動生成することもできます。

前提知識

1. 描画領域、仕様書ではいわゆるグラデーション ボックス (明確な理解のため、以下ではこの用語を翻訳しません) に関連しています。関連する DOM の実際のサイズ。たとえば、background が設定されている場合、描画領域は DOM のパディング ボックスになります。ただし、background-size でサイズが指定されていない限り、list-style-image が設定されている場合、描画領域は1em平方。

2. W3C の説明から、ブラウザは実際に Gradient で指定された構文に従って対応する画像を生成することがわかります。

グラデーションとは、1 から滑らかにフェードしていく画像です。

背景だけでなく、

background: linear-gradient(white, gray);list-style-image: radial-gradient(circle, #006, #00a 90%, #0000af 100%, white 100%);

なども使用できます。 3.実際には背景画像に設定されています。単純なグラデーションカラーの場合は、次のスタイルを使用してサポートされていない古いブラウザをダウングレードできます

.gradient {/* can be treated like a fallback */  background-color: red;/* will be "on top", if browser supports it */  background-image: linear-gradient(red, orange);}

原理は次のとおりです。 MOOC.com から借用した画像:

Gradient には、以下に示すいくつかのサブ機能があります。

Linear-gradient

構文は次のとおりです:

linear-gradient() = linear-gradient(  [ | to ]?,  <color-stop-list>)<side-or-corner> = [left | right] || [top | bottom]

最初のパラメータはカラー グラデーションの方向を指定します:

• には、真上を意味する 0deg、右 (時計回り) を意味する 90deg などの角度を指定できます。
• には、上へ、右へ、へなどのキーワードも指定できます下から左はそれぞれ 0 度、90 度、180 度、270 度に対応します。もちろん、指定することはできません。デフォルト値は、bottom

です。 2 番目のパラメーターは、カラー ブレークポイント (つまり、color-stop) を指定します。位置は省略できます。最初のデフォルトは 0%、最後のデフォルトは 100% です。中間の値が指定されていない場合は、

linear-gradient(red 40%, white, black, blue)/*等价于*/linear-gradient(red 40%, white 60%, black 80%, blue 100%)

詳細 複数の境界の場合は、予期しない状況を避けるために、W3C 仕様を参照することができます。

ブラウザはどのようにしてグラデーションの線を描画するのでしょうか?

以下に示すように、グラデーション ボックスの中心 (対角線の交点) から開始して、CSS で指定された角度で両側に延長し、終点はグラデーション ボックスの頂点に近い頂点になります。グラデーション線の垂直の足 垂直線、始点 これも同様の方法です。2点間の距離がグラデーション線の長さになります（中学幾何の感覚が強いですね～）。

グラデーション ラインの長さを計算する式は次のとおりです。

abs(W * sin(A)) + abs(H * cos(A))A是角度，W是gradientbox的宽，H为高

これを読んで混乱しているように感じますか? : フロントエンド なぜエンジニアはこれらの幽霊を知る必要があるのでしょうか?

いいえ、いいえ、UI を開発するときは、ブラウザーの原則を明確に理解し、頭の中にある視覚的なドラフトに基づいて CSS コードを正しく分解できるようにする必要があります。そうしないと、何度も試してみることしかできません。 。

:chestnut: 栗 1

以下の書き方でも同様の効果があります

  background-image: linear-gradient(yellow, green); // 默认方向为to bottom  background-image: linear-gradient(to bottom, yellow, green); // 使用关键字指定方向  background-image: linear-gradient(180deg, yellow, green); // 使用角度指定方向  background-image: linear-gradient(to top, green, yellow);  background-image: linear-gradient(to bottom, yellow 0%, green 100%); // 指定颜色断点

:chestnut: 栗2 つの

もちろん複数の色のブレークポイントも可能です:

background-image: linear-gradient(to bottom, #FF0000 14.28%, #FFA500 14.28%, #FFA500 28.57%, #FFFF00 28.57%, #FFFF00 42.85%, #008000 42.85%, #008000 57.14%, #0000FF 57.14%, #0000FF 71.42%, #4B0082 71.42%, #4B0082 85.71%, #800880 85.71%, #800880 100%);

この例にはちょっとしたトリックがあり、2 つの異なる色が 2 つあります。グラデーション デフォルトはグラデーションですが、図に示すように明らかな色の変化 (急激な変化) の効果を作成する必要がある場合は、同じ位置に異なる色を使用してそれを実現できます。

:chestnut: Chestnut Three

色に透明度のグラデーションを設定します

.gradient-1 {  background-image: url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg);  background-size: 100% 100%;} .gradient-2 {  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url(http://a57.foxnews.com/global.fncstatic.com/static/managed/img/fn2/876/493/EmmaWatsonBrown.jpg) no-repeat;  background-size: 100% 100%;}

効果は次のとおりです。左側と右側のマスクに追加されたレイヤー。この効果は実際に CSS3 のマルチバックグラウンド構文を使用しています

その他の例はここでご覧いただけます http://lea.verou.me/css3patterns /

放射状グラデーション (radial-gradient)

放射状グラデーションは、実際には同心円または楕円内の点から外側に向かう色のグラデーションです。

構文の簡略版は次のとおりです:

radial-gradient() = radial-gradient(  [ || ]? [ at ]? ,  <color-stop-list>)

• position用来指定渐变圆心的位置，默认为center， 赋值规则 与background-positon的类似；
• ending-shape可以是circle或者elipse，如果省略，则默认值与size相关，size指定一个值就是圆形，否则是椭圆；
• size可以是具体的值，也可以用关键字指定，默认值是farthest-corner。如果是具体值，圆形需要一个数值，椭圆需要两个。关键字则包括：
  • closest-side 指gradient box某一边到盒子中心最近的距离；
  • farthest-side 指gradient box某一边到盒子中心最远的距离；
  • closest-corner 指gradient box某一顶点到盒子中心最近的距离；
  • farthest-corner 指gradient box某一顶点到盒子中心最远的距离；

• color-stop-list与linear-gradient类似

注意：

• size的数值不能是负数
• W3C规范规定，百分比的数值只能用于椭圆，不能用于圆形。
• position的值可以是负数

所以，复杂版语法如下：

radial-gradient() = radial-gradient(  [ [ circle               || ]                          [ at ]? , |    [ ellipse              || [ | ]{2} ]    [ at ]? , |    [ [ circle | ellipse ] || ]                  [ at ]? , |    at <position> ,  ]?  <color-stop> [ ,]+)<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

:chestnut: 栗子一

以下几种写法是等价的

.gradient-1 {  background-image: radial-gradient(yellow, green);} .gradient-2 {  background-image: radial-gradient(ellipseatcenter, yellow 0%, green 100%);} .gradient-3 {  background-image: radial-gradient(farthest-cornerat 50% 50%, yellow, green);} .gradient-4 {  background-image: radial-gradient(ellipsefarthest-cornerat 50% 50%, yellow, green);}

:chestnut: 栗子二

看下size各种关键字的效果

.gradient-1 {  background-image: radial-gradient(circleclosest-sideat 30% 50%, yellow, green);} .gradient-2 {  background-image: radial-gradient(circlefarthest-sideat 30% 50%, yellow, green);} .gradient-3 {  background-image: radial-gradient(circleclosest-cornerat 30% 50%, yellow, green);} .gradient-4 {  background-image: radial-gradient(circlefarthest-cornerat 30% 50%, yellow, green);}

圆心没设置在中心是因为矩形的对角线相等且平分，所以closest-corner = farthest-corner，就没法比较差异了。

重复渐变（Repeating Gradients）

基本语法与上面的线性渐变和径向渐变类似，就是增加了重复的特性。

从 Can I use 的数据看目前支持程度不乐观，PC除了IE都还不错，移动端Android4.0以下都红o(╯□╰)o。。

但是了解下还是必要的

重复的规则简单说就是用最后一个颜色断点的位置减去第一个颜色断点位置的距离作为区间长度，不断的重复。比如repeating-linear-gradient(red 10px, blue 50px) 就相当于linear-gradient(…, red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, …)

至于首尾颜色距离为0等特殊情况，这里就不细说 了，可以到 W3C规范 自行研究。

:chestnut: 栗子

div {  width: 100px;  height: 100px;  margin: 10px;  border: 1px solidblue;  float: left;} .repeat-linear {  background-image: repeating-linear-gradient( 45deg, white, white 10px, red 10px, red 20px);} .repeat-radial {  background: repeating-radial-gradient( circleatbottomleft, white, white 10px, red 10px, red 20px);}

根据上面说的规则，这个例子里的区间长度是首尾颜色的位置之差，是20px。

我们可以验证下，两张图里都有约7个红白条，矩形宽高均100px，对角线则是约140px，140px/7=20px，bingo！

注：本文例子的代码在 codepen 可以查看

参考文章

1. W3C: Gradients
2. CSS-Tricks: CSS Gradients
3. 大漠：CSS3 Gradient
4. MDN: CSS linear-graient() , radial-gradient() , Using CSS gradients