ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3の線形グラデーションを使用して境界線を作成するサンプルコードの共有
CSS3の線形グラデーションを使用して境界線を作成するサンプルコードの共有
- 高洛峰オリジナル
- 2017-03-09 17:16:541833ブラウズ
線形グラデーションの線は、特にストロークを使用して境界線を作成する場合に非常に強力です。ここでは、CSS3 の線形グラデーション線形グラデーションを使用して境界線を作成するサンプル コードを見ていきます
一般に、アプリの枠線の輪郭が1ピクセル未満なので、いつものように1pxの枠線を直接描画しましたが、1pxではありましたが、結果がアプリ内のストロークよりもまったく異なり「太かった」ため、ネットで探しました。解決策はないかと探しましたが、しばらく探しても見つかりませんでした。要求側があまり乱暴にしたくない場合は、自分で解決するしかありません。 。
そこで、前の方法を使って線形グラデーションを考えました
.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;}<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>
OK、また出てきましたが、まだ少し欠陥があるので、問題はストロークの位置（左、上、右、下）を変更することです) パラメータを変更する必要があります
たとえば、左のストロークを変更する必要があります:
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%); background-size: 1px 100%; background-position: left;
具体的なものは 1 つずつリストされていません。
線形を使用して複雑な境界線効果を作成します
さらに、線形グラデーション属性を使用して豪華な境界線効果を作成する方法をインターネットで見ました。まず、コードが与えられていますので、コンピューター上で効果を確認できます:
<!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: '';
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. 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度が右に相当します。
上記は、線形メソッドを使用してゴージャスな境界線を実現するためのコードと説明です。これをローカルに実装して、より新しい組み合わせの実装方法を見つけることができます。
以上がCSS3の線形グラデーションを使用して境界線を作成するサンプルコードの共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。