CSSでグラデーション効果を実現するにはどうすればよいですか? CSSの背景色のグラデーションとテキストのグラデーション効果の実装（コード例）-CSSチュートリアル-php.cn

CSSでグラデーション効果を実現するにはどうすればよいですか? CSSの背景色のグラデーションとテキストのグラデーション効果の実装（コード例）

青灯夜游

リリース： 2018-09-13 13:56:08

オリジナル

20591 人が閲覧しました

フロントエンド Web ページを開発する場合、フロントエンドページをより美しくすることができるいくつかのグラデーション効果がよく使用されます。では、これらのグラデーション効果は CSS コードを使用してどのように実装されるのでしょうか?この章では、CSS でグラデーション効果を実現する方法を説明します。 CSS の背景色のグラデーションとテキストのグラデーション効果の実装 (コード例) では、CSS のグラデーションスタイルと CSS グラデーションの実装方法を紹介します。困っている友人は参考にしていただければ幸いです。

1. CSS 背景色のグラデーションスタイル

1. CSS 線形背景グラデーションスタイル

構文:

background-image: linear-gradient(<point> || <angle>, <stop>, <stop> , <stop>)

ログイン後にコピー

最初のパラメーターは、グラデーションの開始点または角度です。 2 番目のパラメータは色の停止点 (色) です。止まります）。少なくとも 2 つの色 (開始点と終了点) が必要です。任意の色を追加して、色のグラデーションを豊かにすることができます。色の停止点は、色、または色とパーセンテージを加えたものとして定義できます。

コード (ブラウザーの互換性を考慮):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--线性渐变</title>
		<style>
			.demo{
				width:500 ;
				height: 300;
				margin: 50px auto;
			}
			.demo *{
				width: 200px;
				height: 200px;
				margin: 20px;
				text-align: center;
				line-height: 200px;
				color: #fff;
				font-size: 16px;
				float: left;
			}
			.demo1{
				/* 底色 */
				background-color: #fd0d0d;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #fd0d0d), color-stop(0.66, #d89e3c), color-stop(0.83, #97bb51));
				/* chrome 10+, safari 5.1+ */
				background-image: -webkit-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* firefox; multiple color stops */
				background-image: -moz-linear-gradient(top,#fd0d0d, #d89e3c, #97bb51);
				/* ie 6+ */
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;);
				/* ie8 + */
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#fd0d0d&#39;, endColorstr=&#39;#d89e3c&#39;)";
				/* ie10 */
				background-image: -ms-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* opera 11.1 */
				background-image: -o-linear-gradient(#fd0d0d, #d89e3c, #97bb51);
				/* 标准写法 */
				background-image: linear-gradient(#fd0d0d, #d89e3c, #97bb51);

			}
			.demo2{
				/* 底色 */
				background-color:#d41a1a;
				/* chrome 2+, safari 4+; multiple color stops */
				background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #d41a1a), color-stop(0.66, #d9e60c), color-stop(0.83, #5c7c99));
				/* chrome 10+, safari 5.1+ */
				background-image:-webkit-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* firefox; multiple color stops */
				background-image:-moz-linear-gradient(45deg, #d41a1a, #d9e60c, #5c7c99);
				/* ie10 */
				background-image: -ms-linear-gradient(45deg, #d41a1a 0%, #d9e60c 100%);
				/* opera 11.1 */
				background-image: -o-linear-gradient(45deg, #d41a1a, #d9e60c);
				/* 标准写法 */
				background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">基本线性渐变--自上而下</div>
		    <div class="demo2">基本线性渐变--45度角</div>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでグラデーション効果を実現するにはどうすればよいですか? CSSの背景色のグラデーションとテキストのグラデーション効果の実装（コード例）

2 つの線形グラデーションの違いは、background-image の 3 つの色にあることがわかります。値(#fd0d0d)の最初の色の値が角度値:45degになります。

2.CSS放射状背景グラデーションスタイル

CSS放射状カラーグラデーション(Radial Gradients)と線形グラデーション(linear) グラデーション)、一方向に沿ってグラデーションするのではなく、点を中心として 360 度周囲にグラデーションを放射します。現在、IE を除くすべてのブラウザは CSS 放射状カラーグラデーション (放射状) をサポートしています。グラデーション) ですが、独自の異なる構文もあります

構文:

background-image: radial-gradient([<position> || <angle>]，[<shape> || <size>]，<stop>，<stop>，<stop>)

ログイン後にコピー

コード例 (ブラウザーの互換性を考慮):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css背景渐变--径向渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
			}
			.demo *{
				width:200px ;
				height:200px;
				margin: 50px 15px;
				float: left;
			}
			.demo1{
				background-image: -moz-radial-gradient(#ecff05, red);
				background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(#ecff05), to(red)); /* old */
				background-image: -webkit-radial-gradient(#ecff05, red); /* new syntax */
				background-image: radial-gradient(#ecff05, red);
			}
			.demo2{
				background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
				background-image: -webkit-radial-gradient(45px 45px, circle cover, #ecff05, red);
				background-image: radial-gradient(45px 45px 45deg, circle cover, #ecff05 0%, orange 100%, red 95%);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1"></div>
			<div class="demo2"></div>
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSでグラデーション効果を実現するにはどうすればよいですか? CSSの背景色のグラデーションとテキストのグラデーション効果の実装（コード例）

2. CSS フォントテキストのグラデーションスタイル

コード例 (ブラウザの互換性を考慮):

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css字体文字渐变</title>
		<style>
			.demo{
				width:500px ;
				height:200px;
				margin: 50px auto;
				font-size: 20px;
				background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
			   /*必需加前缀 -webkit- 才支持这个text值 */
			    -webkit-background-clip: text; 
			    /*text-fill-color会覆盖color所定义的字体颜色： */
			    -webkit-text-fill-color: transparent; 
			}
		</style>
	</head>
	<body>
		<div class="demo">css字体文字渐变,css字体文字渐变</div>
	</body>
</html>

ログイン後にコピー

Rendering:

CSSでグラデーション効果を実現するにはどうすればよいですか? CSSの背景色のグラデーションとテキストのグラデーション効果の実装（コード例）

Core code:

background-image: 使用するグラデーションカラー範囲を定義します。

-webkit-background-clip: text----useブロック内のテキストをトリミング領域として外側にトリミングし、テキストの背景がブロックの背景となり、テキストの外側の領域がトリミングされます。または、オブジェクト内のテキストの塗りつぶしの色を設定します。

注:

現在の text-fill-color 属性は Webkit コアブラウザーでサポートされているようであるため、グラデーション効果は Chrome ブラウザーまたは Safari ブラウザーの 2 つのデモページでのみ表示されます。 IE ではもちろん、Firefox ブラウザでも単色で表示されます。

以上がCSSでグラデーション効果を実現するにはどうすればよいですか? CSSの背景色のグラデーションとテキストのグラデーション効果の実装（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。