Le rayon de la bordure ne fonctionne pas pour l'image à l'intérieur du point d'ancrage
P粉903969231
P粉903969231 2024-04-06 17:20:25
0
1
491

J'utilise le code HTML suivant :

<a class="-video-detail-qualifiers-branding">
    <img src=""/>
</a>

Code SCSS :

.-video-detail-qualifiers-branding {
  border: 2px solid #D7C378;
  border-radius: 4px;

  img {
    height: 85px;
    width: 85px;
    padding: 5px;
  }

  img::after {
    border-radius: 4px;
  }
}

Problème : le code ci-dessus applique le rayon de bordure à la balise d'ancrage, mais pas à la balise img. Je veux que le rayon de bordure de ces deux éléments soit de 4 pixels.

P粉903969231
P粉903969231

répondre à tous(1)
P粉647449444
.-video-detail-qualifiers-branding {
  border: 2px solid #D7C378;
  padding: 5px;
  display: inline-block;
  border-radius: 4px;

  img {
    display: block;
    height: 85px;
    width: 85px;
    border-radius: 4px;
  }
}

Si vous ajoutez from <img> 中删除填充,并将其添加到 <a> 中,并将 display: block; aux deux, vous pouvez voir que border-radius fonctionne pour les deux balises.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal