Maison >interface Web >tutoriel CSS >Tutoriel d'introduction CSS : bordure de bordure d'image
Tutoriel d'introduction CSS : bordure de bordure d'image
- 高洛峰original
- 2017-02-08 10:07:041656parcourir
1. Bordure de l'image
Dans la section "CSS Border", nous expliquons en détail l'attribut border. En CSS, nous utilisons également l'attribut border pour définir la bordure de l'image.
Syntaxe :
border-width : valeur de pixel ;
border-style : valeur d'attribut
border; -color : valeur de couleur ;
Remarque : Ou utilisez la méthode d'écriture de bordure concise, telle que "border:1px solid gray;".
Remarque :
Si vous oubliez l'attribut de bordure, veuillez revenir en arrière et le vérifier vous-même.
Exemple 1 :
<!DOCTYPE html>
<head>
<title>图片边框border</title>
<style type="text/css">
img
{
width:60px;
height:60px;
border:1px solid red;
}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>L'effet d'aperçu dans le navigateur est le suivant :
Exemple 2 :
<!DOCTYPE html>
<head>
<title>图片边框border</title>
<style type="text/css">
img{width:60px;height:60px;}
img:hover{border:1px solid gray;}
</style>
</head>
<body>
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>L'effet d'aperçu dans le navigateur est le suivant :
Analyse : Dans cet exemple, nous utilisons la pseudo-classe ":hover" pour définir ce gris apparaîtra lorsque la souris passera sur le cadre de l'image.
Pour plus de didacticiels d'introduction CSS : articles sur les bordures d'images, veuillez faire attention au site Web PHP chinois !