ホームページ > 記事 > ウェブフロントエンド > CSSにおけるアウトラインとボーダーの違いの解析
CSSにおけるアウトラインとボーダーの違いの解析
- 黄舟オリジナル
- 2017-07-27 09:21:083654ブラウズ
ボーダーとアウトライン:
ボーダー属性:
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="img/mm1.jpg"></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-radius1像素的左右了吧，扩展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 ピクセルになります。 🎜🎜
border-radius と box-shadow を使用します。 🎜🎜以上がCSSにおけるアウトラインとボーダーの違いの解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。