Maison > Article > interface Web > Analyse de la différence entre contour et bordure en CSS
Analyse de la différence entre contour et bordure en CSS
- 黄舟original
- 2017-07-27 09:21:083709parcourir
border et contour :
attribut border :
border-width, border-style, border-color où border-style peut être nul ou caché
contour (contour)
Tracez une ligne entourant l'élément autour du bord de la bordure de l'élément, y compris la couleur du contour, le style du contour, le contour - Les paramètres des trois sous-propriétés de largeur peuvent être définis par défaut et il n'y a pas d'ordre fixe. Les contours n'occupent pas d'espace sur la page et ne sont pas nécessairement rectangulaires.
Les navigateurs autres que IE prennent directement en charge le contour. Uniquement les navigateurs IE8 et supérieurs qui spécifient les grandes lignes de prise en charge !DOCUMENT.
outline-style peut être aucun (ne contient pas l'attribut caché)
Résumé : Les différences entre les deux sont :
1.outline ne prend pas de place et n'ajoute pas de largeur ou de hauteur supplémentaire (cela ne provoquera pas de refusion ou de repeinture lors du rendu du navigateur)
2.outline a Il peut être non rectangulaire (sous le navigateur Firefox)
Dans le navigateur FireFox, il y a des coins arrondis correspondant à outlineoutline-radius
Exemple :
Utilisez le contour pour obtenir l'effet suivant
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>直角三角形（右下角）</title>
<style type="text/css">
.use-outline-offset{
margin-left: auto;
margin-right: auto;
width: 200px;
height: 200px;
border:40px solid #000000;
background-color:#cccccc;
outline-width:40px;
outline-style:dotted;
outline-offset:-80px;
box-sizing: border-box;
}
</style></head><body><p class="use-outline-offset"></p></body></html>Image d'effet :
box-shadow simule l'effet de coin arrondi du contour
outline-radiusBien que cela soit inutile, nous pouvons utiliser d'autres attributs pour obtenir quelque chose comme un effet, par exemple, box-shadow.
, l'un des maîtres de la construction graphique. Ce que nous utilisons habituellement box-shadow ce sont les trois premiers paramètres, le décalage horizontal/vertical et la taille du flou. Il peut y avoir des amis. On ne sait pas ce que c'est. La quatrième valeur du paramètre facultatif est pour ? box-shadowLa quatrième valeur du paramètre, expansion sans nom, peut étendre la plage de projection. Bien entendu, la zone étendue est une zone de couleur unie. Nous pouvons utiliser cette fonctionnalité pour simuler l'effet de bordure de couleur unie outline qui n'affecte pas la taille de l'élément !
Exemple premier, le code est le suivant :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>圆角</title>
<style type="text/css">
.outline-radius {
margin: 200px auto;
width: 400px;
height: 300px;
border-radius: 1px;
box-shadow: 0 0 0 30px #cd0000;
}
.outline-radius>img{
width: 100%;
height: 100%;
}
</style></head><body><p class="outline-radius">
<img src="img/mm1.jpg"></p></body></html>
Le rendu est le suivant :
Ce qui suit est une brève explication de la signification des deux lignes suivantes du code CSS :
border-radius: 1pxsignifie que la taille des coins arrondis est de 1 pixel. Certains élèves pourront être surpris, pourquoi fait-il 1 pixel ? Les coins arrondis de la capture d'écran sont évidemment des dizaines de pixels, ce qui est expliqué ci-dessous-
box-shadow: 0 0 0 30px #cd0000apparaît 4 valeurs, à savoir le décalage horizontal 0, le décalage vertical 0, le flou 0 (couleur unie) et la taille d'expansion 30 pixels. Nous pouvons imaginer que la lumière brille directement au-dessus de la boîte, car il n’y a ni décalage ni flou et nous ne pouvons voir aucune ombre. En fait, l'ombre de la boîte est exactement de la taille de la boîte (avec un coin arrondi de 1 pixel). A ce moment, elle est agrandie de 30 pixels. On peut imaginer que l'ombre du coin arrondi de 1 pixel est. agrandi de 30 pixels supplémentaires. Oh, n'est-ce pas l'effet dont nous avons besoin ? C'est l'effet montré dans la capture d'écran !Vous savez que
border-radiusfait environ 1 pixel. Après expansion de 30 pixels, le coin arrondi aura une taille de 30 pixels.
Cependant, bien qu'elle ne soit pas visible à l'œil nu, la méthode ci-dessus est en réalité imparfaite car l'image n'est pas un angle droit pur, mais a un angle de 1. -coin arrondi en pixels. Si vous souhaitez obtenir un effet parfait de carré intérieur et de cercle extérieur, vous pouvez ajouter une couche de balises et utiliser border-radius et box-shadow pour les balises extérieures.
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!