背景知識：box-shadow、outline
使用シナリオの多様化を考慮して、複数の境界線のデザインがますます増えています。過去には、border-imageプロパティを使用して処理できますが、これはあまり柔軟ではありません。 CSSコードレベルで。ここで、box-shadowとoutlineの2つのプロパティを使用して、それぞれ複数の境界線を実装します。
1.ボックスシャドウスキーム
アイデア：ボックスシャドウの4番目のパラメーター（拡大半径）のサイズを使用します。複数の投影
コードの例：
<div class="border-multiple"> 多重边框实现方案一：box-shadow </div> .border-multiple { margin: 50px auto; padding: 20px; width: 600px; background-color: #fff; box-shadow: 0 0 0 10px #f0f, 0 0 0 15px #00f, 0 2px 15px 15px rgba( 0, 0, 0, .8); }
複数の境界線--box-shadow
！[ここに画像の説明を挿入]（https://img-blog.csdnimg.cn/20191223164521742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cZNubgOd_aHR0cHM6Ly9ibG1概要：
1.影はレイアウトに影響せず、ボックスサイズの影響も受けません
。2 。コンマ区切りの構文をサポートし、任意の数の投影を作成できます
。3。欠点：実線の境界線のみを実現でき、その他のスタイル国境の達成することはできません。
2.アウトラインスキーム
コード例：
<div class="border-outline"> 多重边框实现方案二：outline </div> .border-outline { margin: 200px auto; padding: 20px; width: 600px; background-color: #ff0; outline: 3px dashed #0f0; outline-offset: -10px; }
複数の境界線-アウトライン
概要：
1. 2層の境界線を作成することを前提とします
。2 。アウトラインオフセットの属性値が必要になる場合があります
。3 。アウトラインのストロークはデフォルトで長方形です。角が丸い場合は、バグと見なされます。角を丸くすることはできません
。4。Comma構文はサポートされていません。
私は長年開発に携わってきた古いウェブフロントエンドプログラマーです。少し前に、学習に最適なウェブフロントエンド学習ドライ製品を整理するのに1か月を費やしました。さまざまなフレームワークが編成されて送信されます。すべてのフロントエンドの小規模パートナーに、入手したい場合は、次のQQグループを追加して無料で入手できます。
2.フレーム内の丸い角[2]
背景知識：ボックスシャドウ、アウトライン
上記の例の要約3のバグを解決するために、ボックスシャドウの拡張半径を使用して、丸い角との間のギャップを埋めることができます。アウトライン。
コード例：
<div class="inner-rounding"> 需要借助 box-shadow、outline、“多重边框”来实现 注意点 ： box-shadow 的扩展半径应该是 圆角半径的 0.5倍 </div> .inner-rounding { background-color: #ccc; margin: 50px auto; padding: 20px; width: 600px; padding: 20px; border-radius: 20px; box-shadow: 0 0 0 10px #f00; outline: 10px solid #f00; }
注：ボックスシャドウの拡張半径は、丸みを帯びた角の半径の0.5倍にする必要があります。厳密に言えば、（√2-1）倍にする必要があります
。ここでは、計算を改善するために0.5倍を使用しています。
3.半透明の境界線[3]
背景知識：rgbaまたはhslaの色属性、背景クリップの
アイデア：トリミングされた背景のパディングボックスに境界線を表示させます
コード例：
<div class="border-opacity"> 半透明边框的实现 </div> .border-opacity { margin: 50px auto; padding: 20px; width: 600px; border: 10px solid hsla(0, 0%, 100%, 0.5); background-color: #fff; background-clip: padding-box; }
概要：
半透明の境界線を実現するには、css3のbackground-clipプロパティを使用する必要があります。background-clipに
は3つのプロパティがあります。1。border
-box：背景が境界線ボックスにトリミングされます（境界線は表示されません）
2。パディングボックス：背景はマージンボックスの内側にトリミングされます（境界線が表示されます）
3、content-box: 背景被裁剪到内容框（边框紧贴着内容）
半透明の境界線レンダリング
4.連続画像境界線[4]
背景知識：CSSグラデーション、基本的な境界線画像、背景クリップ
境界線画像が画像境界線を実装する方法を見てみましょう：境界線画像
の実現原理は、9つの正方形のグリッド拡張方法です：画像を9つに切り、要素の境界線の対応する側面と角に適用します。
コード例：
<p class="border-image">border-image 的实现原理是九宫格伸缩法：把图片切割成九块，然后把它们应用到元素边框相应的边和角。</p> <p class="border-image">我们并不想让图片的某个特定部分固定在拐角处；而是希望出现在拐角处的图片区域是随着元素宽高金额边框厚度的变化而变化的。</p> .border-image { border: 40px solid transparent; border-image: 33.334% url("http://csssecrets.io/images/stone-art.jpg"); padding: 1em; max-width: 20em; font: 130%/1.6 Baskerville, Palatino, serif; } .border-image:nth-child(2) { margin-top: 1em; border-image-repeat: round; }
ボーダー画像のレンダリング
短所：画像の特定の部分をコーナーに固定したくないので、コーナーに表示される画像の領域が要素の幅、高さ、境界線の太さによって異なることを願っています。
それを解決する方法は？
実装のアイデア：
1。cssグラデーションと背景展開を使用します
2.背景画像に真っ白な単色の背景をオーバーレイし
ます3.境界領域を通して下の背景を表示するには、2つのレイヤーに異なる背景を指定する必要がありますbackground-clipの値は
4です。複数の背景の下部に背景色を設定するには、白から白へのCSSグラデーションが必要で、純粋な白の単色の背景の効果をシミュレートします。
コード例：
<p class="contituous-images">实现思路： 1、利用 css 渐变和背景的扩展 2、在背景图片上，在叠加一层纯白的实色背景 3、为了让下层的背景透过边框区域显示出来，需要给两层背景指定不同的 background-clip 值 4、在多重背景的最底层设置背景色，需要用一道从白色过渡到白色的 css 渐变来模拟出纯白色实色背景的效果 </p> .contituous-images { padding: 1em; border: 1em solid transparent; /* background: linear-gradient(white, white), url(http://csssecrets.io/images/stone-art.jpg); background-size: cover; background-clip: padding-box, border-box; background-origin: border-box; */ /* background 还可简写如下 */ background: linear-gradient(white, white) padding-box, url(http://csssecrets.io/images/stone-art.jpg) border-box 0 / cover; width: 21em; padding: 1em; overflow: hidden; /* 边框可拖拽 */ resize: both; font: 100%/1.6 Baskerville, Palatino, serif; }
連続画像の境界線
グラデーションパターンを使用して、エンベロープスタイルの境界線を作成することもできます。
コード例
グラデーションパターンでエンベロープスタイルの境界線を作成することもできます
.envelope-border {パディング：1em; ボーダー：0.5emソリッド透明; 背景：linear-gradient（white、white）padding-box、repeating-linear-gradient（-45deg、red 0、red 12.5％、transparent 0、transparent 25％、＃58a 0、＃58a 37.5％、transparent 0、transparent 50％）0 / 3em 3em; 最大幅：20em; フォント：100％/ 1.6 Baskerville、Palatino、serif;}
封筒の境界線のレンダリング
複数の境界線↩境界線の
内側の角が
丸い↩半透明の境界線↩連続
画像の境界線↩
著者：
リンクのあなたの心：https：//www.jianshu.com/p/273e77cb99c6