CSS で線形グラデーションを実装するにはどうすればよいですか?次の記事では、線形グラデーション関数 CSS Linear-gradient() の使用方法を紹介し、線形グラデーションのさまざまな応用について説明します。
#linear-gradient1. 構文
linear- gradient([[to | ],]? , [, ...]?)
-webkit-linear-gradient([[|],]? , [, ...]?)
direction を使用する場合、前者には
to を付け、後者には
を付けないでください。角度、パフォーマンスに一貫性がありません。 [推奨される学習:
css ビデオ チュートリアル ]
1) デフォルト
両方のデフォルトは上から下ですbackground-image:linear-gradient(#00ffff, #ff1493, #006699); background-image:-webkit-linear-gradient(#00ffff, #ff1493, #006699)
2) <方向>: [left|right]|[top|bottom]両方の使用
background-image:linear-gradient(to left, #00ffff, #ff1493, #006699); background-image:-webkit-linear-gradient(left, #00ffff, #ff1493, #006699);
background-image:linear-gradient(to left top, #00ffff, #ff1493, #006699); background-image:-webkit-linear-gradient(left top, #00ffff, #ff1493, #006699);
## の使用
#度
方向の対応。
-webkit-対応する方向は
450°-angle##
background-image:linear-gradient(275deg, #ff1493, #000000, #006699); background-image:-webkit-linear-gradient(175deg, #ff1493, #000000, #006699);
450°-175° =275° したがって、以下に示すように、2 つは同じように動作します:
4)
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%);
上の画像から色の変化のプロセスを確認できます: 0% --> 10%: #ff1493
飽和
10% --> 40%: #ff1493
は、
#40% で
に徐々に変化します で、
#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%);
注:stop
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%);、効果は上の図と一致しています。 後者の値が前者より小さい場合は、前者が優先されます。以下のように、
20px
は 60px
60px. 効果は以下のようになります:
background-image:linear-gradient(right, #ff1493 60px, #000000 20px); background-image:-webkit-linear-gradient(right, #ff1493 60px, #000000 20px);
##拡張子 1: グラデーションの中心デフォルトは次のとおりです。 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: 繰り返し線形グラデーション
属性を使用して、繰り返しのカラー ブロックを描画できます
background-image:repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px); background-image:-webkit-repeating-linear-gradient(0deg, #ff1493, #000000 10px, #006699 20px)
2. よく使われるスタイル
(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);
(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
<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
裁剪出圆角, 但是这种方式不适用于角度较大的圆角
<div id="wrap"> <div id="content"></div> </div> <style> #wrap { width: 180px; height: 40px; border-radius: 20px; background: #FFF; position: relative; } #wrap::before { content: ''; 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>
这几种方式都能做到圆角渐变边框,但是无法做到内部背景透明
(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
设置为透明色,渐变区域就能显示出来了
好了,over,第一次写文章,希望能坚持下去=.=
(学习视频分享:web前端)
以上がCSS で線形グラデーション (linear-gradient) を実装する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。