ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSのアウトライン属性はどのように使用されますか?アウトライン属性とボーダー属性の違い（例）
CSSのアウトライン属性はどのように使用されますか?アウトライン属性とボーダー属性の違い（例）
- 青灯夜游オリジナル
- 2018-09-14 11:07:524124ブラウズ
この章では、cssのアウトライン(アウトライン)属性の使い方を紹介します。アウトライン属性とボーダー属性の違い（例） CSSにおけるアウトライン属性の知識と、アウトライン属性とボーダー属性の違いを誰でも理解できるようにします。困っている友人は参考にしていただければ幸いです。
1. CSS アウトライン (アウトライン) 属性とは
アウトライン (アウトライン) は、要素の周囲に引かれる線で、次の場所にあります。境界線の端 境界線は要素を強調表示する役割を果たすことができます。
例: 通常、ブラウザでコンテンツを読むときに、マウスをクリックしてタグ リンクまたは入力ラジオ ボタンにフォーカスを取得すると、要素は等高線の破線ボックスで囲まれます。この輪郭の点線のボックスが輪郭です。
デフォルトでは、a タグをクリックするか、入力するか、マウス クリック イベントを追加すると、ブラウザーはアウトライン フレーム (クロムの下の青色) を残します。ただし、これらのデフォルトのアウトライン フレームは外観に影響を与え、フロントエンド ページの全体的な効果を損なうことがあるため、実際には維持したくありません。では、ブラウザのデフォルトのアウトライン フレームを削除したり、デフォルトのアウトライン フレームの効果を変更するにはどうすればよいでしょうか?
CSS のアウトライン (アウトライン) プロパティを使用すると、デフォルトのアウトラインの点線ボックス効果を変更できます。アウトライン属性には、次の関連属性があります。
outline: 1 つのステートメントですべてのアウトライン属性を設定します。
outline-style: のスタイルを設定します。アウトライン
- #outline-width: アウトラインの幅を設定します
- outline-color: アウトラインの色を設定します
- outline-offset: アウトラインをオフセットして境界線の端に描画します
outline: outline-color || outline-style || outline-width；アウトラインの関連スタイルを 1 つずつ設定するのではなく、一度に設定を完了できるようにしましょう。 次の例を使用して、CSS アウトライン属性の使用方法を見てみましょう: リンクがフォーカスされたときに、より目を引くようにしたい場合は、アウトライン線を次のように設定できます。赤、次のように：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮廓--outline</title>
<style>
.a { outline:5px solid red; }
</style>
</head>
<body>
<a href="#">我是默认下的连接</a><br /><br />
<a href="#" class="a">我是一个测试连接，会红</a>
</body>
</html>レンダリングは次のとおりです。
.tab{ outline: none; ...... /* other properties */} 上記の例から、outline (アウトライン) と border (border) は非常によく似ていることがわかりますが、outline (アウトライン) と border (border) は似ているけど違う。
2. アウトラインとボーダーの違い
- アウトラインは余分なスペースを取りません。幅または高さ。境界線は幅を占めるため、輪郭は境界線のように要素のサイズや位置に影響を与えません。
- アウトラインは長方形以外の場合があります。境界線は通常の境界線です。
- outline は、リンク、フォーム コントロール、ImageMap などの要素用に設計されており、ほぼすべての有形の HTML 要素に適用できます。
以上がCSSのアウトライン属性はどのように使用されますか?アウトライン属性とボーダー属性の違い（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。