Bordures et décorations de boîte CSS
Le module de bordures et décorations de boîte CSS fournit des propriétés permettant d'ajouter des bordures, des formes de coins,et des ombres de boîte aux éléments. Ce module étend les bordures et décorations de boîte introduites dans le module Arrière-plans et bordures CSS, en ajoutant les propriétés corner-shape et border-shape, les propriétés logiques border-radius, les propriétés longues pour la propriété box-shadow et des propriétés pour créer des bordures partielles.
Bordures et décorations de boîte en action
Sélectionnez une valeur superellipse() dans le menu déroulant pour changer la forme de la bordure. Utilisez le curseur pour modifier la taille du rayon de la bordure. Cochez la case pour afficher ou masquer l'ombre de la boîte.
Référence
>Propriétés
border-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-colorborder-end-end-radiusborder-end-start-radiusborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-start-end-radiusborder-start-start-radiusborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthbox-shadowcorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shapecorner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shape
Le module des bordures CSS et décorations de boîte niveau 4 introduit également les propriétés border-shape, border-limit et border-clip, ainsi que les propriétés longues border-clip-bottom, border-clip-left, border-clip-right et border-clip-top. Actuellement, aucun navigateur ne prend en charge ces fonctionnalités. Le module introduit également des propriétés composants pour les propriétés bien prises en charge border-radius et box-shadow, y compris border-block-end-radius, border-block-start-radius, border-bottom-radius, border-inline-end-radius, border-inline-start-radius, border-right-radius, border-top-radius, box-shadow-blur, box-shadow-color, box-shadow-offset, box-shadow-position et box-shadow-spread. Ces propriétés composants ne sont également pas encore prises en charge.
Types de donnée
Fonctions
Guides
- Apprendre CSS : le modèle de boîte
-
Apprenez comment les bordures et autres propriétés du modèle de boîte impactent le modèle de boîte CSS.
Concepts associés
- La propriété
box-sizing - La propriété
box-decoration-break - La propriété
text-shadow - Le type de donnée
<url> - Le type de donnée
<color> - Le type de donnée
<image> - Le type de donnée
<position> - Le mot-clé
currentColor
Le module des fonds et bordures CSS
background-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizebackground(raccourcie)background-position-xbackground-position-yborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-image(raccourcie)
Spécifications
| Spécification |
|---|
| CSS Borders and Box Decorations Module Level 4> |
Voir aussi
- La propriété
filter - La propriété
backdrop-filter - La fonction de filtre
drop-shadow() - Appliquer des couleurs aux éléments HTML en utilisant le CSS
- Outils :