css3線形グラデーションの導入事例の共有

グラデーションは背景画像の形式でページに表示されますグラデーションの本質は背景画像です。 CSS3 では、グラデーションは線形グラデーションと放射状グラデーションに分類できます。線形グラデーションはグラデーション ラインに沿ったグラデーションであり、放射状グラデーションは楕円または円の周囲のグラデーションです。

2. 線形グラデーション line-gradient

2.1 基本構文

background-image: line-gradient( [ | ,]? [, ]+ );

[] は正規表現の文字クラスであり、ここでは

| 前または後ろのどちらかを選択することを意味します。 0か1の意味です。つまり、方向を指定しない場合は、グラデーション カラーを直接使用できます。

+プラス記号は 1 以上を意味します。

2.1.1 角度

質問: 角度が 45 度で、グラデーションの色が深いピンクから黄色に変化する場合、次の写真のうち正しいのはどれですか?

<p></p>

正解:

B

この理解は、よく知られた CSS3 の特定の角度の回転とは多少異なります。たとえば、CSS3 における 90 度の回転の効果は次のようになります。

<p></p>

そして。オンライン 線形グラデーションでは、下の図に示すように、グラデーションの角度はデフォルトで垂直方向から時計回りに回転します。時計の針の回転方向として理解できます。勾配角度は線形勾配の方向を指定します。0 度は上から下への勾配を意味し、90 度は下から上への勾配を意味し、270 度は下から上への勾配を意味します。グラデーションの角度効果は図に示すとおりです。

<p></p>

上の例では、0 度->360 度の効果は実際には時計回りの回転です。

2.1.2 サイドオアコーナー

サイドオアコーナーは中国語で側面または隅を意味します。垂直方向のオプションの値は、top、center、bottom、水平方向のオプションの値は、left、center、および right です。デフォルト値は centerbottom

で、上から下へのグラデーションです。

to + サイドまたはコーナー キーワードと組み合わせて使用​​できます。 to を追加しない場合はグラデーションの開始点を示し、to を追加するとグラデーションの方向を示します。たとえば、上方向は 0 度、右方向は 90 度、下方向は 180 度、左方向は 270 度に相当します。関連する効果を以下の図に示します。

<p></p>

さまざまなバージョンのブラウザで使用する場合の注意事項:

新しいブラウザは w3c の標準構文を直接使用できますが、以前のバージョンのブラウザは各ブラウザ プレフィックスを使用する必要があります

。

IE10 以下のバージョンはグラデーションをサポートしていません。

• Chrome と Firefox の新しいバージョンではプライベート プレフィックスが削除されており、プライベート プレフィックスを追加する場合と追加しない場合には違いがあります (プライベート プレフィックスが追加、右は 0 度、反時計回りに 1 回転します);

• oper はバージョン 37 以降でサポートされます。プライベート プレフィックスがないため、追加された場合は無視されます

• この記事では、線形について説明します。 W3C 標準構文の gradient Linear-gradient と、radial gradient については次の記事で説明します。 ; ]

は、線形グラデーションの色、開始点、終了点を指定します。中国語に翻訳すると、色 + スペース + パーセンテージまたは長さの値。

• background: linear-gradient(#fb3 20%, #58a 80%);

<p></p>これで、領域の上部 20% が #fb3 の単色で塗りつぶされ、領域の下 20% が #58a の単色で塗りつぶされ、実際のグラデーション領域はその間にあります。高さの 20% と 80%。 2 つのカラー スケールを近づける場合は、2 つのカラー スケールを重ね合わせます: <p></p>

background: linear-gradient(#fb3 50%, #58a 50%);

<p></p> <p></p>

"複数のカラー スケールが同じ位置にある場合、トランジションが開始および終了する無限小のトランジション エリアが作成されます。 color はそれぞれ最初と最後に指定された値です。実際には、滑らかなグラデーション処理ではなく、その位置で色が突然変化します。 css3-images )

グラデーションはコードで生成された画像であるため、他の背景画像と同様に扱い、background-size でサイズを変更できます。 、コードと効果は次のとおりです:

<p></p>

<p></p>

.box{
  width: 200px;
  height: 90px;
  background: linear-gradient(#fb3 50%, #58a 50%);
  background-size: 100% 30px;
}

<p></p>

为了避免每次改动条纹宽度时都要修改两个数字，我们可以再次从规范那里找到捷径。

“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

——CSS 图像（第三版）（ http://w3.org/TR/css3-images ）

对于水平和垂直渐变条纹我们很好理解。如果是斜向渐变，我们想得到条纹的宽度为15px，我们可以这样写：

<p></p>

 

.box{
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg,
    #fb3 25%, #58a 0, #58a 50%,
    #fb3 0, #fb3 75%, #58a 0);
  background-size: 30px 30px;
}

 

对比想要的图以及实际效果图，为什么得到线条的宽度比我们想要的线条宽度要小，难道是浏览器出问题了，no，是我们自己错了。这就需要深入理解渐变的长度了。

2.2 线性渐变的渐变长度的理解

如何确定渐变线的长度？我们可以从官网的解释中找到答案：

渐变线是过渐变区域中心的一条直线，而渐变的起点和终点是在与渐变线的垂直线上。如果给定渐变的区域和渐变的方向，我们就能够确定渐变的起始点和总长度了。因此在下面的css样式中：

.box{
  width: 200px;
  height: 100px;
  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
  background-size: 30px 30px;
}

 

我们可以用下面的这幅图来计算渐变的长度，我们指定了区域的大小时30px，根据 勾股定理 ，可以计算直角三角形的斜边长度。因此，我们计算得到的条纹的宽度实际是: 15/1.414=10.606 ，比我们需要的宽度15p要小。

$$ 15/√2 $$

这就意味着，如果想要让条纹的宽度变化为我们原本想要的15px，就需要将 background-size 指定为 2*15*1.4=42.426px 。

我们来看下修改后的效果，修改 background-size 后，得到了我们想要的效果图。

2.3 线性渐变的案例

2.3.1 利用线性渐变生成条纹

在上面的例子中，我们已经使用线性渐变生成了水平和垂直条纹，这里就不在赘述。

2.3.2 利用线性渐变生成多背景图片

在CSS3中，backgrounds支持多背景，越前面的背景越处于上面 ，也就是背景可以无限累加，而 渐变的本质是background-image ，所以我们可以实现任意数量的渐变背景图的叠加效果。

有如下图片：

我们添加透明值: linear-gradient(to bottom left, #fc3, rgba(255,255,255,0))

.demo{
  width: 250px;
  height: 156px;
  background: linear-gradient(to bottom left, #fc3, rgba(255,255,255,0)), url(./flower.jpg);
}

 

得到的效果如下：

我们可以利用这一点，来给背景添加不同的效果，如让图片不可见（修改为： linear-gradient(to bottom left, #fff, rgba(255,255,255,0)) ）。

2.3.3 利用线性渐变生成比例可控的虚线

在实际开发中，如果需要虚线，我们一般会设置 border-style:dashed ，然而这种方法存在一个问题： 实线和虚线的比例是一定的 。在Chrome和Firefox浏览器下，颜色区的宽高比是 3:1 ，颜色和透明区的宽度比例是 1:1 :

而在IE浏览器下，颜色区的宽高比是 2:1 ，颜色区和透明区的宽度比例也是 2:1 ：

如果设计师设计的UI中，要求虚线的颜色区的宽高比是 5:3 ，实线与虚线的比例是 1:1 ，此时使用 border-style:dashed 就达不到设计师设计的效果了。有两种方法可以解决这个问题：

• 要求设计师改UI，这么low X的事难道是我们前端工程师做的吗？

• 查阅资料，使用其他方法实现设计师想要的效果，正确选择！

这里，我们就可以使用 linear-gradient 到达设计师想要的效果：

.demo{
  height: 3px;
  background: linear-gradient(to right, #000, #000 5px, transparent 5px, transparent);
  background-size: 10px 100%;
}

 

对应的效果如下：

2.3.4 利用线性渐变生成带线框的三角

考虑下面的场景，我们需要生成一个对话框：

我们可能绝大多数使用下面的做法：

.talk {
  display: inline-block;
  max-width: 80%;
  border: 1px solid blue;
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 14px;
  position: relative;
}

 

.talk:before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid blue;
  border-right: 0;
  border-bottom: 0;
  left: -4px;
  top: 13px;
  transform: rotate(-45deg);
  background-color: #fff;
}

 

如果背景不是白色：

.talk {
  display: inline-block;
  max-width: 80%;
  border: 1px solid blue;
  border-radius: 3px;
  padding: 6px 10px;
  background: linear-gradient(to right, deeppink, yellow);
  font-size: 14px;
  position: relative;
}

 

可以看到如果背景色不是白色，旋转后的效果就有一个多余的三角形，不是我们想要的效果，我们可能尝试这样修改css代码：

.talk:before {
   content: '';
   position: absolute;
   display: inline-block;
   width: 0;
   height: 0;
   border-top: 5px solid transparent;
   border-right: 5px solid blue;
   border-bottom: 5px solid transparent;
   left: -5.1px;
   top: 12px;
}

 

额，比上面的效果好多了，但是三角与边框交接的区域多了一个线条，与我们想要的效果还是有出入，此时我们使用线性渐变看看，如下css所示：

.talk:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: linear-gradient(to top, blue, blue) no-repeat,
              linear-gradient(to right, blue, blue) no-repeat,
              linear-gradient(135deg, #fff, #fff 5.2px, hsla(0, 0%, 100%, 0) 5.2px) no-repeat;
  background-size: 60px 1px, 1px 60px, 60px 60px;       
  transform: rotate(-45deg);
  left: -4px;
  top: 13px;
}

 

哇，看起来不错额，今晚可以和妹子约起了。。。

2.3.5 利用线性渐变生成加号和减号

考虑有以下需求：

1. 切图，使用小图片；

2. 传统方法，使用 ::before 和 ::after 伪元素配合实现；

3. 使用线性渐变实现；

<a></a>
<a></a>

 

传统方法：

.btn {
  display: inline-block;
  background: #f0f0f0 no-repeat center;
  border: 1px solid #d0d0d0;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  color: #666;
  transition: color .2s;
}
.btn-plus{
  position: relative;
}

.btn-plus:before{
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: currentColor;
  left: 50%;
  top: 50%;
  margin-top: -1px;
  margin-left: -5px;
}
.btn-plus:after{
  content: '';
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: currentColor;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  margin-left: -1px;
}

 

使用线性渐变方法：

.btn {
  display: inline-block;
  background: #f0f0f0 no-repeat center;
  border: 1px solid #d0d0d0;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  color: #666;
  transition: color .2s;
}
.btn-plus {
  background-image: 
    linear-gradient(to top, currentColor, currentColor), 
    linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px, 2px 10px;
}

.btn-minus {
  background-image: linear-gradient(to top, currentColor, currentColor);
  background-size: 10px 2px;
}

 

这种方法生成加号和等号与传统使用 ::before 和 ::after 以及配合 background-color 和 border 相比，使用渐变背景生成的好处是居中定位方便。

2.3.6 利用线性渐变生成切角效果

直接看代码：

<p></p>

 

.clip{
  width: 150px;
  height: 150px;
  background: #58a;
  background:
    linear-gradient(135deg, transparent 15px, deeppink 0)
    top left,
    linear-gradient(-135deg, transparent 15px, yellow 0)
    top right,
    linear-gradient(-45deg, transparent 15px, blue 0)
    bottom right,
    linear-gradient(45deg, transparent 15px, green 0)
    bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

 

利用线性渐变还可以实现折角效果（计算稍微复杂，详细计算步骤可以看《css揭秘》相关章节），如：

2.3.7 利用线性渐变实现信封效果

<p>重复渐变实现信封效果</p>

 

.demo2{
   width: 300px;
   font-size: 18px;
   padding: 10px;
   border: 10px solid transparent;
   background: linear-gradient(white, white) padding-box,
     repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%,
       #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 60px 60px;
}

 

2.3.8 利用线性渐变实现裁剪效果

<p>这里是文字</p>

 

.clip{
  padding: 1em;
  border: 10px solid transparent;
  background: linear-gradient(white, white) padding-box,
    repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / 10px 10px;
  animation: ants 12s linear infinite;
  max-width: 20em;
}

@keyframes ants {
  from { background-position: 0 0; }
  to { background-position: 100% 100%; }
}

 

在浏览器中的效果如下：

如果将 boder 修改为 1px solid transparent ,可以看到下面的效果：

2.4 更多线性渐变的应用

更多关于线性渐变的应用可以查看 这里

这里的图形都是使用线性渐变实现的，可见CSS3中线性渐变功能之强大！

4 更多关于线性渐变的东西

除了线性渐变 linear-gradient ，css3中还支持重复线性渐变 reapting-linear-gradient 。

• 利用重复线性渐变实现斜向条纹的效果，与线性渐变相比，不需要苦苦思考生成一个重复单元，直接改变渐变的角度以及尺寸即可。

  background: repeating-linear-gradient(60deg,#fb3, #fb3 15px, #58a 0, #58a 30px);

5 写在最后

如果想对提高自己的csss水平，推荐《CSS揭秘》，很不错额。

感谢阅读，希望能帮助到你。

相关推荐：

javascript计算渐变颜色的实例

html5 canvas绘制放射性渐变色效果代码实例

实例详解css3编写浏览器渐变背景色的方法

以上がcss3線形グラデーションの導入事例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。