CSS3 線形グラデーションを使用して境界線を作成する方法

この記事では、CSS3 の線形グラデーションを使用して境界線を作成する方法を主に紹介します。必要な友達に参考にしてください。特に、そのストロークを使用して、コピーされた境界線効果を作成することができます。ここでは、CSS3 の線形グラデーションを使用して境界線を作成する例を見ていきます

一般的に、アプリの境界線の線は、その後、いつものように1pxの枠線を直接トレースしましたが、結果はアプリの枠線とはまったく異なり、「太かった」ため、解決策がないかネットで検索しましたが、できませんでした。見つからない場合はどうすればよいですか? 需要側があまり乱暴なことをしたくない場合は、自分で解決するしかありません。最後の方法では、線形勾配（線形勾配）

CSS

rreeexml/html

.line li{  border: none;   
  background-image: -webkit-linear-gradient(#222 50%,transparent 50%);   
  background-image: -moz-linear-gradient(#222 50%,transparent 50%);   
  background-image: -o-linear-gradient(#222 50%,transparent 50%);   
  background-image: linear-gradient(#222 50%,transparent 50%);   
  background-size:  100% 1px;   
  background-repeat: no-repeat;   
  background-position: bottombottom;}

左ストロークを変更する必要がある場合：

CSS 1つずつ列挙します。

線形を使用して複雑な境界線効果を作成します

さらに、線形グラデーション属性を使用して豪華な境界線効果を作成する方法をインターネットで見ました。まず、コードが与えられ、コンピューターでの効果を確認できます:

CSS

<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数

一般的な考え方は、最初に白い p を定義し、次に白い正方形よりも大きい円を持つ色付きの p を定義するというものです。 。 2 つを重ねて、白い p が色の付いた p を覆い、境界線の効果を実現します。

ここでは CSS の知識ポイントがたくさん使用されています。

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

多くのブラウザがこの CSS メソッドをサポートするようになりました。このメソッドには以下の 3 つの使用モードがあります:

①background:linear-gradient(top,#fff,#000)
このコードは、上部の白から始まり、下部の黒に遷移することを意味します。
②background:linear-gradient(top,right,#fff,#000)
このコードは、位置に関する 2 つのパラメーター、top と right を渡します。これは、右上から開始して左下に変更することを意味します。最初のものと同じです。
③background:linear-gradient(30deg,#fff,#000)
このコードの最初のパラメータは角度を渡しますが、実は原理と位置は同じですが、標準の位置から変わりません。では、角度と位置の対応関係は何でしょうか?実験によると、0度が下、90度が左、180度が上、360度が右に相当します。
上記は、線形メソッドを使用してゴージャスな境界線を実現するためのコードと説明です。これをローカルに実装して、より新しい組み合わせの実装方法を見つけることができます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 を使用して文字列をインターセプトする方法

純粋な CSS を使用して動的なテキスト効果を実現する例

以上がCSS3 線形グラデーションを使用して境界線を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。