interface Webtutoriel CSSComment l'attribut CSS outline est-il utilisé ? La différence entre les attributs de contour et les attributs de bordure (exemple)Comment l'attribut CSS outline est-il utilisé ? La différence entre les attributs de contour et les attributs de bordure (exemple)
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 :
?x-oss-process=image/resize,p_40 "153689322740717Comment 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!
Les astuces CSS perdues de Cohost.orgApr 25, 2025 am 09:51 AMDans cet article, Blackle Mori vous montre quelques-uns des hacks trouvés tout en essayant de repousser les limites du support HTML de Cohost. Utilisez-les si vous osez, de peur que vous soyez également étiqueté un criminel CSS.
Style CSS de niveau supérieur pour les curseursApr 23, 2025 am 11:04 AMLes curseurs personnalisés avec CSS sont excellents, mais nous pouvons faire passer les choses au niveau supérieur avec JavaScript. À l'aide de JavaScript, nous pouvons passer entre les états du curseur, placer du texte dynamique dans le curseur, appliquer des animations complexes et appliquer des filtres.
Worlds Collide: Détection de collision de l'ordre clé à l'aide de requêtes de styleApr 23, 2025 am 10:42 AMLes animations CSS interactives avec des éléments se ricochent semblent plus plausibles en 2025. Bien qu'il soit inutile de mettre en œuvre Pong dans CSS, la flexibilité et la puissance croissantes de CSS renforcent le soupçon de Lee selon lequel un jour, ce sera un jour
Utilisation du filtre de fond CSS pour les effets d'interface utilisateurApr 23, 2025 am 10:20 AMConseils et astuces sur l'utilisation de la propriété CSS Back-Filter pour styliser les interfaces utilisateur. Vous apprendrez à superposer des filtres en toile de fond entre plusieurs éléments et à les intégrer à d'autres effets graphiques CSS pour créer des conceptions élaborées.
Smil sur?Apr 23, 2025 am 09:57 AMEh bien, il s'avère que les fonctionnalités d'animation intégrées de SVG n'ont jamais été obsolètes comme prévu. Bien sûr, CSS et JavaScript sont plus que capables de porter la charge, mais il est bon de savoir que Smil n'est pas mort dans l'eau comme précédemment
'Pretty' est dans l'œil du spectateurApr 23, 2025 am 09:40 AMYay, laissez-le saut pour le wat-wrap: joli atterrissage dans la technologie safari aperçu! Mais méfiez-vous qu'il est différent de la façon dont il fonctionne dans les navigateurs de chrome.
CSS-Tricks raconte xliiiApr 23, 2025 am 09:35 AMCette mise à jour de CSS-Tricks met en évidence des progrès significatifs dans l'Almanac, des apparitions de podcast récentes, un nouveau guide CSS Counter et l'ajout de plusieurs nouveaux auteurs contribuant un contenu précieux.
La fonctionnalité @Apply de Tailwind est meilleure qu'il n'y paraîtApr 23, 2025 am 09:23 AMLa plupart du temps, les gens présentent la fonctionnalité de Tailwind avec l'un des utilitaires à propriété unique de Tailwind (qui modifie une seule déclaration CSS). Lorsqu'il est présenté de cette façon, @Apply ne semble pas du tout prometteur. So évidence
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
MinGW - GNU minimaliste pour Windows
Ce projet est en cours de migration vers osdn.net/projects/mingw, vous pouvez continuer à nous suivre là-bas. MinGW : un port Windows natif de GNU Compiler Collection (GCC), des bibliothèques d'importation et des fichiers d'en-tête librement distribuables pour la création d'applications Windows natives ; inclut des extensions du runtime MSVC pour prendre en charge la fonctionnalité C99. Tous les logiciels MinGW peuvent fonctionner sur les plates-formes Windows 64 bits.
Adaptateur de serveur SAP NetWeaver pour Eclipse
Intégrez Eclipse au serveur d'applications SAP NetWeaver.
