Solving Fort Forflow avec des rayons de bordure héréditaires

Une caractéristique intéressante (mais ennuyeuse) de CSS est que l'arrière-plan de l'élément enfant peut déborder la bordure arrondie de l'élément parent. Par exemple, une carte contenant des éléments internes, si l'élément interne est défini, son arrière-plan peut déborder la bordure de la carte.

Généralement, le moyen le plus simple de résoudre ce problème est d'ajouter des attributs overflow: hidden à l'élément de carte. Je crois que c'est la première solution à laquelle la plupart des gens pensent lorsqu'ils rencontrent cette situation.

Cependant, cela crée un nouveau problème - le contenu en dehors de l'élément de carte est découpé - il est donc impossible d'utiliser des marges négatives ou position: absolute pour déplacer le contenu de l'élément enfant de la carte.

Il existe un moyen légèrement lourde mais plus efficace d'empêcher le contexte de l'élément enfant de déborder la bordure arrondie de l'élément parent, qui est d'ajouter la même bordure arrondie à l'élément enfant.

Le moyen le plus simple est de permettre à l'élément enfant hériter de la bordure arrondie de l'élément parent:

.child {
  border-radius: inherit;
}

Si l'abréviation de border-radius est trop longue, vous pouvez toujours hériter du rayon d'angle arrondi des quatre coins selon la situation:

.child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

ou, pour ceux qui souhaitent utiliser des propriétés logiques, voici le code équivalent. (Pour une compréhension plus facile des propriétés logiques, remplacez top et left par start et bottom et right par end.)

.child {
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}

Pourquoi ne pas appliquer les antécédents directement sur la carte?

Si l'élément .card lui-même contient border-radius et définit directement l'arrière-plan, le même effet peut être obtenu. Alors, pourquoi ne pas faire ça?

Eh bien, parfois vous ne pouvez pas le faire. Par exemple, lorsque votre élément .card est divisé en deux parties, avec seulement une partie de celle-ci.

Pourquoi devrions-nous faire cela?

La veille peut être la meilleure raison. Au moins, vous savez que vous ne créerai pas de problèmes plus tard lorsque vous utilisez le schéma de réglage du rayon arrondi.

Ce mode est particulièrement utile lorsque le positionnement de l'ancrage CSS est entièrement pris en charge. Je m'attends à ce que cela devienne bientôt la norme pour le positionnement pop-up en 1-2 ans.

c'est-à-dire que pour les fenêtres contextuelles, je préfère personnellement déplacer le contenu pop-up du flux de documents et le mettre dans l'élément en tant qu'élément enfant direct. Ce faisant, je peux empêcher overflow: hidden de résoudre les popups lors de l'utilisation du positionnement de l'ancrage.

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!