CSS で線形を使用して複雑な境界線効果を作成する分析例-CSSチュートリアル-php.cn

CSS で線形を使用して複雑な境界線効果を作成する分析例

高洛峰

リリース： 2017-03-13 17:35:13

オリジナル

1881 人が閲覧しました

この記事では、CSS で線形を使用して複雑な境界線効果を作成するための関連情報と、linear-gradient 属性を使用して豪華な境界線効果を作成する例の分析について主に紹介します

線形グラデーション属性を使用して、豪華な境界線効果を作成します。まず、コードが与えられており、コンピューター上で効果を確認できます:

CSS で線形を使用して複雑な境界線効果を作成する分析例

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box {     
            margin: 80px 30px;     
            width: 200px;     
            height: 200px;     
            position: relative;     
            background: #fff;     
            float: left;     
        }     

            .box:before {     
                content: &#39;&#39;;     
                z-index: -1;     
                position: absolute;     
                width: 220px;     
                height: 220px;     
                top: -10px;     
                left: -10px;     
            }     

        .first:before {     
            background-image: linear-gradient(90deg, yellow, gold);     
        }     

        .second:before {     
            background-image: linear-gradient(0deg, orange, red);     
        }     

        .third:before {     
            background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);     
        }     
    </style>
</head>
<body>
    <p class="box first"></p>
    <p class="box second"></p>
    <p class="box third"></p>
</body>
</html>

ログイン後にコピー

コードからわかるように、実際には境界線を使用していないのですが、この境界線の効果はどのように実現されるのでしょうか?
一般的な考え方は、最初に白い p を定義し、次に白い正方形よりも大きい円である色付きの p を定義するということです。 2 つを重ねて、白い p が色の付いた p を覆い、境界線の効果を実現します。
ここでは CSS の知識ポイントがたくさん使用されています。

1. :before疑似クラス

上記のコードを通して、定義された白い p で実際に :before 疑似クラスを定義し、色付きの四角形のすべてのスタイルをここに配置していることがわかります。これは、:before 定義を使用すると、境界線の幅に合わせて上と左を調整するだけで位置決めが簡単になるためです。同時に、両者は一つの全体となる。

2. 線形グラデーション

現在、多くのブラウザがこの CSS メソッドをサポートしています。このメソッドには以下の 3 つの使用モードがあります: ①background: Linear-gradient(top, #fff, #000)
このコードは、上部の白から始まり、下部の黒に遷移することを意味します。
②background:linear-gradient(top,
right,#fff,#000) このコードは、位置に関する 2 つのパラメーター、top と right を渡します。これは、右上から開始して左下に変更することを意味します。は第 1 章と同じです。 1 つは同じです。
③background:linear-gradient(30deg,#fff,#000)

このコードの最初のパラメータは角度を渡しますが、原理と位置は実は同じですが、標準の位置から変わりません。では、角度と位置の対応関係は何でしょうか?実験によると、0度は

下、90度は左、180度は上、360度は右に対応します。

上記は、線形メソッドを使用してゴージャスな境界線を実現するためのコードと説明です。これをローカルに実装して、より新しい組み合わせの実装方法を見つけることができます。

以上がCSS で線形を使用して複雑な境界線効果を作成する分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。