Maison > interface Web > tutoriel CSS > Comment ajouter deux bordures à une image en CSS

Comment ajouter deux bordures à une image en CSS

醉折花枝作酒筹
Libérer: 2023-01-07 11:45:27
original
3243 Les gens l'ont consulté

En CSS, vous pouvez utiliser le remplissage pour ajouter une deuxième bordure. Il vous suffit d'ajouter "border: border size solid color; padding: pixel size;" à l'élément d'image. Vous pouvez considérer la balise img comme un conteneur pouvant contenir des images et vous pouvez définir un remplissage pour celle-ci.

Comment ajouter deux bordures à une image en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

L'ajout de doubles bordures aux images est également utilisé dans de nombreuses applications pratiques, mais ce n'est peut-être pas fréquent. Voici une brève introduction sur la façon d'obtenir cet effet, afin de maîtriser l'application de certaines propriétés CSS. Regardons d'abord un exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>document</title>
<style type="text/css">
img{
  border:5px solid #696;
  padding:5px;
  background-color:#CCC;
}
</style>
</head>
<body>
<img src="mytest/demo/dborder.jpg"/>
</body>
</html>
Copier après la connexion

Le code ci-dessus obtient cet effet en définissant la bordure et le remplissage de la balise En particulier, de nombreux débutants pensent souvent que est un contenu similaire au texte. En fait, il ne peut pas être considéré comme un conteneur pouvant contenir des images (peut-être même s'il n'est pas assez précis). une frontière peut être définie pour cette distance.

Apprentissage recommandé : Tutoriel vidéo CSS

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal