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)

青灯夜游

Libérer： 2018-09-14 11:07:52

original

4126 Les gens l'ont consulté

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；

Copier après la connexion

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>

Copier après la connexion

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 */}

Copier après la connexion

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