CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

青灯夜游
リリース: 2022-04-02 20:16:35
転載
3617 人が閲覧しました

CSS で線形グラデーションを実装するにはどうすればよいですか?次の記事では、線形グラデーション関数 CSS Linear-gradient() の使用方法を紹介し、線形グラデーションのさまざまな応用について説明します。

CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

#linear-gradient

1. 構文

linear- gradient([[to | ],]? , [, ...]?)

-webkit-linear-gradient([[|],]? , [, ...]?)

これら 2 つのタイプは使用方法と表現が異なります。

direction を使用する場合、前者には to を付け、後者には を付けないでください。角度、パフォーマンスに一貫性がありません。 [推奨される学習: css ビデオ チュートリアル ]

1) デフォルト

両方のデフォルトは上から下です

background-image:linear-gradient(#00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(#00ffff, #ff1493, #006699)
ログイン後にコピー

CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

2) <方向>: [left|right]|[top|bottom]両方の使用

逆方向式

background-image:linear-gradient(to left, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left, #00ffff, #ff1493, #006699);
ログイン後にコピー

CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

background-image:linear-gradient(to left top, #00ffff, #ff1493, #006699);
background-image:-webkit-linear-gradient(left top, #00ffff, #ff1493, #006699);
ログイン後にコピー

CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

##3)

## の使用#度

方向の対応。 -webkit-対応する方向は 450°-angle##

background-image:linear-gradient(275deg, #ff1493, #000000, #006699);
background-image:-webkit-linear-gradient(175deg, #ff1493, #000000, #006699);
ログイン後にコピー

450°-175° =275°CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析 したがって、以下に示すように、2 つは同じように動作します:

4)CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析 =

stop を使用すると、パーセンテージまたは特定の値を使用して、この色がこの位置で

彩度##に達することを示すことができます

#

background-image:linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);
background-image:-webkit-linear-gradient(to right, #ff1493 10%, #000000 40%, #006699 60%);
ログイン後にコピー
上の画像から色の変化のプロセスを確認できます:

CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析0% --> 10%: #ff1493

飽和

10% --> 40%: #ff1493 は、#40% で

#000000

に徐々に変化します で、#000000 飽和に達します 40% --> 60%: #000000 が徐々に # になります006699

60%#006699飽和#60% --> 100% に達します: # 006699 常に 彩度

この機能を使用すると、縞模様を描くことができます

  background-image:linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);
  background-image:-webkit-linear-gradient(to right, #ff1493 33%, #000000 33%, #000000 66%, #006699 66%);
ログイン後にコピー

注:

stopCSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

linear-gradient(右へ、#ff1493 0% 33%、#000000 33% 66%、#006699 66% 100%) のように、2 つの値を同時に設定することもできます。 ;-webkit-linear-gradient(to right, #ff1493 33%, #000000 33% 66%, #006699 66% 100%);

、効果は上の図と一致しています。 後者の値が前者より小さい場合は、前者が優先されます。以下のように、20px60px

より小さく、実際には次のように表示されます。

60px. 効果は以下のようになります:

background-image:linear-gradient(right, #ff1493 60px, #000000 20px);
background-image:-webkit-linear-gradient(right, #ff1493 60px, #000000 20px);
ログイン後にコピー
##拡張子 1: グラデーションの中心

CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析デフォルトは次のとおりです。 2 色の中心ですが、設定できます。 グラデーションの中心

/* 3种颜色平分,渐变中心为1/3和2/3处 */
background-image:linear-gradient(to right, #ff1493, #000000, #006699); 
/* 渐变中心在10%和20%处 */
background-image:linear-gradient(to right, #ff1493, 10%, #000000, 20%, #006699);
ログイン後にコピー

注: -webkit-linear-gradient

は、この使用法をサポートしていません

#拡張 2: 繰り返し線形グラデーション

属性を使用して、繰り返しのカラー ブロックを描画できますCSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

background-image:repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px);
background-image:-webkit-repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px)
ログイン後にコピー

2. よく使われるスタイル

CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

(1) マルチカラーの星空

background-image:
    linear-gradient(45deg, rgba(255, 0, 76, 0.7), rgba(0, 0, 255, 0) 80%),
    linear-gradient(135deg, rgba(106, 0, 128, 1), rgba(0, 128, 0, 0) 80%),
    linear-gradient(225deg, rgba(0, 255, 255, 1), rgba(0, 255, 255, 0) 80%),
    linear-gradient(315deg, rgba(255, 192, 203, 0.7), rgba(255, 192, 203, 0) 80%);
ログイン後にコピー
複数の値を同時に設定すると、背景色全体がより華やかに見えます

##(2)チェック柄##

background-image:
    repeating-linear-gradient(0deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(90deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);
    
background-image:
    repeating-linear-gradient(45deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px),
    repeating-linear-gradient(135deg, rgba(0, 255, 255, 0.3) 0px 5px, transparent 5px 10px);
ログイン後にコピー

カラーと透明カラーを交互に使用してレンダリング

1CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

(3)边框渐变

<div id="wrap"></div>
<style>
 #wrap {
    width: 180px;
    height: 40px;
    border: 5px solid transparent;
    border-image: linear-gradient(45deg, aqua, pink, purple) 1;
}

</style>
ログイン後にコピー

内部背景透明,但是不支持设置border-radius

1CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

<div id="wrap"></div>
<style>
 #wrap {
    width: 180px;
    height: 40px;
    border: 5px solid transparent;
    border-image: linear-gradient(45deg, aqua, pink, purple) 1;
    clip-path: inset(0 round 5px);
}

</style>
ログイン後にコピー

注:可以使用clip-path裁剪出圆角, 但是这种方式不适用于角度较大的圆角

1CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

<div id="wrap">
    <div id="content"></div>
</div>
<style>
#wrap {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    background: #FFF;
    position: relative;
}

#wrap::before {
    content: &#39;&#39;;
    position: absolute;
    left: -5px;
    right: -5px;
    top: -5px;
    bottom: -5px;
    background-image: linear-gradient(45deg, aqua, pink, purple);
    border-radius: 25px;
    z-index: -1
}

/*或者*/

#wrap {
    width: 180px;
    height: 40px;
    border-radius: 20px;
    background: #FFF;
    position: relative;
    border: 5px solid transparent;
    background-origin: border-box;
    background-image: linear-gradient(#FFF, #FFF), linear-gradient(45deg, aqua, pink, purple);
    background-clip: padding-box, border-box;
}

/*或者*/

#wrap {
    width: 180px;
    height: 50px;
    border: 5px solid transparent;
    border-radius: 25px;
    background-image: linear-gradient(45deg, aqua, pink, purple);
    background-origin: border-box;
}

#content {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: #FFF;
}

</style>
ログイン後にコピー

这几种方式都能做到圆角渐变边框,但是无法做到内部背景透明

1CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

(4)文字渐变

<div id="wrap"> Darker CMJ</div>
<style>
#wrap {
    font-size: 40px;
    line-height: 40px;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    // color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(45deg, aqua, pink, purple);
}
</style>
ログイン後にコピー

background-clip规定背景的绘制区域,我们设置其值为text,就是在文字区域绘制,然后将文字color或者-webkit-text-fill-color设置为透明色,渐变区域就能显示出来了

1CSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析

好了,over,第一次写文章,希望能坚持下去=.=

(学习视频分享:web前端

以上がCSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!