ホームページ > 記事 > ウェブフロントエンド > CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード)

CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード)

青灯夜游オリジナル: 2018-09-20 11:32:573944ブラウズ

フロントエンド開発のプロセスでは、さまざまな効果を実現するために Linear-gradient が使用されることがあります。CSS の Linear-gradient() 関数は何をするのかについて説明します。線形グラデーションの円形境界線 (コード) を実装します。困っている友人は参考にしていただければ幸いです。

1. CSS 線形グラデーション() とは何ですか?

1. 線形グラデーションの「画像」を作成するために使用される

css 線形グラデーション関数を定義します。

2. 使用法

線形グラデーションを作成するには、グラデーション効果の開始点と方向 (角度として指定) を設定する必要があります。終了色も定義する必要があります。ストップカラーは、Gecko に実行させるスムーズなトランジションであり、少なくとも 2 つを指定する必要があります。ただし、より複雑なグラデーション効果を作成するには、より多くの色を指定できます。

例 (3 つの終端色を指定):

background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 标准语法 */

レンダリング:

CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード)

この例では、線形グラデーションを実現する方向を指定していません。したがって、デフォルトでは上から下に効果が得られますが、効果を得るために方向 (角度) を指定することもできます。例:

方向 (左から右) を指定:

background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */

CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード)

方向 (45 度の角度) を指定します:

background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */

CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード)

#同時に、グラデーションの透明度も実現できます。効果 (透明度の定義):

background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/

CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード)

2. 線形グラデーションの円形境界線の CSS 設定 (コード)

原則:

最初に、サイズの異なる 2 つの正方形を作成し、重ね合わせます

CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード) ##境界線の角丸属性: border-radius を使用して、境界線の丸み角度を 100% に設定します

CSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード) Linear-gradient() を使用して外側の円のグラデーション色を追加した後、次のコードが作成されます。 :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>边框渐变的圆形</title>
        <style>

            .border1{
                width: 200px;
                height: 200px;
                margin:100px auto;

                position: relative;
                border: 1px solid transparent;
                border-radius: 100%;
                background: white;
                background-clip: padding-box;
                padding: 10px;
            }
            .border1::after{
                position: absolute;
                top: -40px; 
                bottom: -40px;
                left: -40px;
                right: -40px;
                background: linear-gradient(45deg,red, blue);
                content: &#39;&#39;;
                z-index: -1;
                border-radius: 100%;
            }
        </style>
    </head>
    <body>    
        <div class="border1"></div>
    </body>
</html>

例これは非常に簡単です。これを練習したり、半円...

のように修正したりすることができます。

以上がCSSのlinear-gradient()関数は何をするのでしょうか?線形グラデーションを使用した円形境界線の実装 (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css border

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS の読み込みが失敗する 6 つの理由についての簡単な説明次の記事：CSS の読み込みが失敗する 6 つの理由についての簡単な説明

続きを見る