ホームページ > 記事 > ウェブフロントエンド > CSSを使ってグラデーションの境界線を持つ円を描く方法を教えます!
CSSを使ってグラデーションの境界線を持つ円を描く方法を教えます!
- 藏色散人オリジナル
- 2021-08-27 16:16:543478ブラウズ
前の記事「HTML/CSSを使用して、面白い動的な波状テキストラインを作成する」では、HTML/CSSを使用して動的な波状テキストラインを作成する方法を紹介しました。
今回は引き続き、cssを使ってグラデーションの境界線を持つ円を実現する方法を紹介していきます。
まず最初に、実装のアイデアを簡単に紹介します。2 つの div を作成します。1 つはクラス名 outer_circle を持つ外部 div で、もう 1 つはクラス名 inner_circle の内部 div ; 外部 div にはグラデーション色の大きな円が含まれ、内部 div には円の内側の端として機能する小さな白い円が含まれ、境界線を作成します。丸。
完全なコードを以下に直接示します:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.outer_circle {
position: relative;
margin: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
}
.inner_circle {
background-image: linear-gradient(
to bottom, rgb(123, 93, 255) 0%,
rgb(56, 225, 255) 100%);
content: '';
position: absolute;
top: -20px;
bottom: -20px;
right: -20px;
left: -20px;
z-index: -1;
border-radius: inherit;
}
</style>
</head>
<body>
<div class="outer_circle">
<div class="inner_circle"></div>
</div>
</body>
</html>効果を以下に示します:
上記のコードでは主に CSS を使用しています。 linear-gradient()関数は、グラデーションの境界線を持つ円を描画します。linear-gradient() の関数は、2 つ以上の色の線形グラデーションを表す画像を作成することです。 。
linear-gradient()次のような関数構文:
.class_name { background-image: linear-gradient(direction, color1, color2 }パラメータ:
$direction: グラデーションの移動方向を指定します。
$color1: 最初のカラー スケールを指定します。
$color2: 2 番目のカラー スケールを指定します。
その他の使用方法:
/* 从上到下，蓝色渐变到红色 */ linear-gradient(blue, red); /* 渐变轴为45度，从蓝色渐变到红色 */ linear-gradient(45deg, blue, red); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);
PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。誰もが「css ビデオ チュートリアル」## を学習することを歓迎します。 ＃」！
以上がCSSを使ってグラデーションの境界線を持つ円を描く方法を教えます!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。