🔙 ⏬ 🏮 ブロック境界のCSS3グラデーション 🤱🏽 ⛷️ 🍅

この記事では、CSS3を使用して任意のブロックの境界線にグラデーションを作成するためのオプションの1つを示します。

最終バージョンでは、上のスクリーンショットにあるボタンが表示されます。

このようなレイアウトで作業します。

<html> <body> <a href="http://google.com" class="magicButton">I am a button!</a> </body> </html>

まず、ボタンにシンプルなスタイルを設定しましょう

 .magicButton { color: #444; font: bold 16px arial; background: #e4e4e4; border: 1px solid transparent; /*    */ border-radius: 3px; padding: 8px 12px; text-decoration: none; text-shadow: 0 1px 1px rgba(255,255,255,0.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25); }

その後、実際にハックに進みます。

境界の代わりにグラデーションを作成するには、まずそこにグラデーションを配置する必要があり（ background-origin：border-box; ）、次にトリミングして正確にこの場所に配置する必要があります（ background-clip：border-box; ）。

メイン部分の準備ができましたが、今では勾配を規定するためだけに残っています。この例では、明るい背景ではないボタンを使用する場合、グラデーションを明るい灰色のトーンで使用します。グラデーションの色はそれに応じて変更する必要があります。

 linear-gradient(#e4e4e4, #ccc);

ただし、グラデーションを設定すると、ボタンの背景全体が同じように塗りつぶされるという問題が発生します。これを行うために、別のグラデーションを適用します。今回だけ、パディングボックス内に配置してトリミングします。

トーガでは、このボタンを取得します： jsfiddle.net/CyberAP/DzHUj

この手法の短所：

メインの背景に半透明のグラデーションを使用することはできません、オーバーレイが発生します。しかし、透明なストロークを作成することは非常に可能です。
境界半径に問題があり、エッジの値が3pxを超えると、グラデーションが顕著にクリップされ始めます。私はまだ解決策を見つけていません。

しかし、プラスもあります：

画像や余分なトラフィックはありません。
ストロークのグラデーションを放射状に設定して、それらを組み合わせることができます。
任意のボーダー幅で動作します。

ブロック境界のCSS3グラデーション

More articles: