Maison  >  Article  >  interface Web  >  Introduction aux caractéristiques de l'attribut border en CSS

Introduction aux caractéristiques de l'attribut border en CSS

不言
不言original
2018-08-21 11:41:092213parcourir

Le contenu de cet article est une introduction aux caractéristiques de l'attribut border en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Ordre des abréviations : width-style-color

par exemple : p{border:1px solid red;}

Introduire les caractéristiques de chaque attribut par ordre d'abréviation :

1. border-width:medium(default.medium):thin;thick;thick;length;inherit;

2.border-style:none(default.none);hidden ( Identique à aucun, sauf lorsqu'il est appliqué aux tableaux, qui sont utilisés pour résoudre les conflits de bordure) ; pointillé (ligne pointillée), plein (ligne continue (rainure double) ); crête (crête 3D); encart (début intégré 3D); héritage ;

3. border-color:color(name, hexadécimal, rgb); >4. border-radius : 0 (valeur par défaut) ; length (px) ;

Vous pouvez également attribuer des valeurs séparément : border-top-left-radius ; ; border-bottom-left-radius;border-bottom-right-radius;

5. border-image: source slice width outset repeat;Les valeurs omises ​​sont leurs valeurs par défaut​​

par exemple :

6. box-shadow : 0px 8px 16px 0px rgba (0,0,0,0.2)
div{
    border-image:url(img.png) 30 30 round;
    -webkit-border-image:url(img.png) 30 30 round;/*safari 5 and older*/
    -o-border-image:url(img.png) 30 30 round;/*Opera*/
}

0,2 représente la transparence

Remarque : ie9+ prend en charge les propriétés border-radius et box-shadow ; Firefox, Chrome, Opera et Safafi prennent en charge toutes les nouvelles propriétés de bordure (c'est-à-dire : border-radius ; border-image et box-shadow pour border-image, safari5 et) ; les anciennes versions nécessitent le préfixe -webkit -, opera nécessite le préfixe -o-

Recommandations associées :

À propos de border-collapse_html/css_WEB-ITnose en css


Propriété CSS border-left-color_html/css_WEB-ITnose

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!

Déclaration:
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