Comment l'attribut CSS outline est-il utilisé ? La différence entre les attributs de contour et les attributs de bordure (exemple)-tutoriel CSS-php.cn

Comment l'attribut CSS outline est-il utilisé ? La différence entre les attributs de contour et les attributs de bordure (exemple)

青灯夜游

Sep 14, 2018 am 11:07 AM

bordercssoutline

Ce chapitre vous présenteraComment utiliser l'attribut CSS outline ? La différence entre l'attribut outline et l'attribut border (exemple) , afin que tout le monde puisse comprendre certaines connaissances sur l'attribut outline en CSS, ainsi que la différence entre les attributs outline et border. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Qu'est-ce que l'attribut CSS outline (outline)

Le outline (outline) est une ligne tracée autour de l'élément, située à le bord de la bordure La périphérie peut jouer le rôle d'éléments de mise en valeur.

Par exemple : lorsque nous lisons habituellement le contenu dans le navigateur, lorsque la souris clique pour obtenir un lien de balise ou un bouton radio d'entrée pour obtenir le focus, l'élément sera entouré d'une boîte en pointillés profilée. Cette boîte en pointillés de contour est le contour.

Par défaut, lorsque vous cliquez sur la balise a, saisissez ou ajoutez un événement de clic de souris, le navigateur laisse un cadre de contour (bleu sous chrome). Cependant, ces cadres de plan par défaut affectent parfois l'apparence et détruisent l'effet global de la page frontale. Nous ne souhaitons pas vraiment les conserver. Alors, comment supprimer le cadre de contour par défaut du navigateur ou modifier l'effet de cadre de contour par défaut ?

L'attribut outline de CSS nous permet de modifier l'effet de boîte en pointillés de contour par défaut. L'attribut outline a les attributs associés suivants :

outline : définit tous les attributs de contour dans une seule instruction
outline-style : définit le style de le contour
outline-width : Définir la largeur du contour
outline-color : Définir la couleur du contour
outline-offset : Décalez le contour et dessinez-le sur le bord de la bordure

Le premier attribut associé outline est une forme abrégée, le le format est :

outline: outline-color || outline-style || outline-width；

Ne définissons pas les styles pertinents du contour un par un, mais pouvons compléter les paramètres en même temps.

Utilisons l'exemple suivant pour voir comment utiliser l'attribut de contour CSS :

Si vous souhaitez que le lien soit plus accrocheur lorsqu'il obtient le focus, vous pouvez définir la ligne de contour au rouge, comme suit :

<!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>

Le rendu est le suivant :

Comment lattribut CSS outline est-il utilisé ? La différence entre les attributs de contour et les attributs de bordure (exemple)

Et si vous souhaitez juste supprimer les lignes de contour sur l'onglet qui affectent la beauté, l'attribut outline peut être défini comme suit :

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

À partir de l'exemple ci-dessus, nous pouvons voir que le contour et la bordure sont très similaires, mais que le contour et la bordure sont similaires mais différents.

2. La différence entre le contour et la bordure

Le contour ne prend pas de place. largeur ou hauteur ; la bordure occupe la largeur ; par conséquent, le contour n'affecte pas la taille ou la position de l'élément comme le fait une bordure.
le contour peut être non rectangulaire ; la bordure est une bordure ordinaire.
le contour est conçu pour des éléments tels que les liens, les contrôles de formulaire et la bordure ImageMap peut être appliqué à presque tous les éléments HTML tangibles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

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;”；如果不设置其中的某个值，也不会出问题。