ボーダーとアウトライン:

ボーダー属性:

border-width、border-style、border-color、border-styleはなしまたは非表示にすることができます

outline (アウトライン)
の端に要素の境界線要素の周囲に線を描画します。これには、outline-color、outline-style、outline-width の 3 つのサブプロパティの設定が含まれます。これらはデフォルトにすることができ、固定された順序はありません。アウトラインはページスペースを占有せず、必ずしも長方形である必要もありません。
IE以外のブラウザはアウトラインを直接サポートしています。 !DOCUMENT を指定する IE8 以降のブラウザのみがアウトラインをサポートします。

outline-style は none にすることもできます (hidden 属性を含まない)

概要: 2 つの違いは次のとおりです:
1. アウトラインはスペースを占有せず、追加の幅や高さを追加しません。 (ブラウザのレンダリング時にリフローや再描画が発生することはありません)
2.outline は長方形ではない場合があります (Firefox ブラウザの場合)

FireFox ブラウザでは、 outline が一致します。丸い角<code>outline-radiusoutline匹对的圆角夫妻outline-radius

示例：

使用outline实现下图效果

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>直角三角形（右下角）</title>
    <style type="text/css">
        .use-outline-offset{
            margin-left: auto;
            margin-right: auto;
            width: 200px;
            height: 200px;
            border:40px solid #000000;
            background-color:#cccccc;
            outline-width:40px;
            outline-style:dotted;
            outline-offset:-80px;
            box-sizing: border-box;
        }
    </style></head><body><p class="use-outline-offset"></p></body></html>

效果图：

box-shadow模拟outline的圆角效果

outline-radius虽然没戏了，但是，我们可以使用其他属性，可以实现类似的效果，比方说，图形构建大神之一的box-shadow.

我们平时使用box-shadow最多的是前面3个参数，水平/垂直偏移以及模糊大小，可能有一些小伙伴并不清楚其第4个可选参数值究竟有何用？box-shadow第4个参数值，名外扩展，可以把投影范围扩大，当然，扩大的区域是实色区域。我们就可以利用这一特性，模拟实现不影响元素占据尺寸的outline实色边框效果啦！

实例先行，代码如下：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>圆角</title>
    <style type="text/css">
        .outline-radius {
            margin: 200px auto;
            width: 400px;
            height: 300px;
            border-radius: 1px;
            box-shadow: 0 0 0 30px #cd0000;
        }
        .outline-radius>img{
            width: 100%;
            height: 100%;
        }
    </style></head><body><p class="outline-radius">
    <img  src="/static/imghwm/default1.png"  data-src="img/mm1.jpg"  class="lazy"   alt="CSSにおけるアウトラインとボーダーの違いの解析" ></p></body></html>

效果图如下：

下面简单解释下两行CSS代码的含义：

border-radius: 1px表示圆角大小1像素。有同学可能奇怪了，怎么是1像素啊，截图圆角明明好几十像素，下面正好就解释了；
box-shadow: 0 0 0 30px #cd0000出现了4个数值，分别是水平偏移0, 垂直偏移0，模糊0(纯色), 扩展大小30像素。我们可以想象成，光线直接从盒子的正上方照下来，因为没有偏移没有模糊，我们看不到任何阴影。实际上，盒子的阴影正好就是盒子的大小（外带1像素圆角），此时，扩展30像素，我们可以脑补一下，1像素圆角的阴影再扩展30像素。哟，不就是我们需要的效果嘛，不就是截图展示的效果嘛！

知道border-radius 1像素的左右了吧，扩展30像素后，圆角就是30像素大小了。

然而，虽然肉眼看不出来，上面的方法实际有瑕疵，因为图片不是纯正的直角，有1像素的圆角。如果你想实现完美的内方外圆的效果，可以套一层标签，外面的标签使用border-radius和box-shadow

例: 🎜🎜アウトラインを使用して以下の効果を実現します🎜🎜

🎜

🎜🎜rrreee

レンダリング:

🎜

🎜🎜 🎜

box-shadow はアウトラインの角丸効果をシミュレートします

🎜outline- radius はなくなりましたが、他の属性を使用して同様の効果を実現できます。たとえば、グラフィックス構築のマスターの 1 つである box-shadow などです。🎜 🎜通常は box を使用します。 -shadow は、最初の 3 つのパラメータ、水平/垂直オフセット、ぼかしサイズに最もよく使用されます。その 4 番目のオプションのパラメータの値が何であるかを知らない人もいるでしょう。 box-shadow の 4 番目のパラメータ値は名前の外側の拡張であり、投影範囲を拡張できます。もちろん、拡張された領域はベタ色の領域です。この機能を使用すると、要素のサイズに影響を与えない outline の単色の境界線効果をシミュレートできます。 🎜🎜最初に例を示し、コードは次のとおりです: 🎜

🎜🎜rrreee🎜 🎜

レンダリングは次のとおりです:

🎜

🎜🎜以下は簡単な説明です。 CSS コードの次の 2 行の意味: 🎜🎜

🎜border-radius: 1px は、角丸サイズが 1 ピクセルであることを意味します。一部の学生は驚くかもしれません。なぜ 1 ピクセルなのでしょうか? スクリーンショットの角の丸い部分は明らかに数十ピクセルです。これについては以下で説明します。 🎜🎜

🎜 box-shadow: 0 0 0 30px #cd0000 4 つの値が表示されます。つまり、水平オフセット 0、垂直オフセット 0、ぼかし 0 (単色)、および拡張サイズ 30 ピクセルです。。オフセットやブラーがなく、影も見えないため、光がボックスの上から直接当たっていると想像できます。実際には、ボックスの影はボックスのサイズ（1 ピクセルの角丸）と同じになります。このとき、1 ピクセルの角丸の影が 30 ピクセル拡大されていると想像できます。さらに 30 ピクセル拡大されます。ああ、必要なのはスクリーンショットに表示されているエフェクトではないでしょうか? 🎜🎜🎜border-radius は約 1 ピクセルであることがわかります。30 ピクセル拡大すると、丸い角のサイズは 30 ピクセルになります。 🎜🎜

🎜しかし、肉眼では見えませんが、画像は純粋な権利ではないため、実際には上記の方法には欠陥があります角度はありますが、角が 1 ピクセル丸くなっています。完璧な内側の正方形と外側の円の効果を実現したい場合は、タグのレイヤーを設定し、外側のタグに border-radius と box-shadow を使用します。 🎜🎜

以上がCSSにおけるアウトラインとボーダーの違いの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。