CSSのアウトライン属性はどのように使用されますか?アウトライン属性とボーダー属性の違い（例）-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのアウトライン属性はどのように使用されますか?アウトライン属性とボーダー属性の違い（例）

青灯夜游

Sep 14, 2018 am 11:07 AM

bordercssoutline

この章では、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>

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

CSSのアウトライン属性はどのように使用されますか?アウトライン属性とボーダー属性の違い（例）

そして、美しさに影響を与えるタブ上の輪郭線を削除したい場合は、

.tab{ outline: none; ...... /* other properties */}

上記の例から、outline (アウトライン) と border (border) は非常によく似ていることがわかりますが、outline (アウトライン) と border (border) は似ているけど違う。

2. アウトラインとボーダーの違い

アウトラインは余分なスペースを取りません。幅または高さ。境界線は幅を占めるため、輪郭は境界線のように要素のサイズや位置に影響を与えません。
アウトラインは長方形以外の場合があります。境界線は通常の境界線です。
outline は、リンク、フォームコントロール、ImageMap などの要素用に設計されており、ほぼすべての有形の HTML 要素に適用できます。

以上がCSSのアウトライン属性はどのように使用されますか?アウトライン属性とボーダー属性の違い（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css里outline是什么Jul 27, 2022 pm 08:39 PM

在css中，outline指的是设置元素轮廓的属性，可以指定元素轮廓的样式、颜色和宽度。outline是一个简写属性，可以在一个声明中按顺序同时设置样式、颜色和宽度，语法“outline:outline-color outline-style outline-width;”；如果不设置其中的某个值，也不会出问题。