Une brève introduction aux styles d'ombre, d'arrière-plan et de bordure arrondie en CSS3

CSS2.1 est sorti depuis 7 ans. L'émergence de CSS3 vise à améliorer les fonctions de CSS2.1, à réduire l'utilisation d'images et à résoudre les effets spéciaux sur les pages HTML

Actuellement, les fonctionnalités de la technologie CSS3 les plus adaptées à une utilisation dans le développement Web mobile incluent :

●Sélecteur amélioré

●Ombre

●Paramètres d'arrière-plan puissants

●Bordure arrondie

Ombre :

Le le style CSS3 actuel prend déjà en charge les effets de style d'ombre. Il existe actuellement deux types d'effets d'ombre disponibles : les effets d'ombre pour le contenu du texte et les effets d'ombre pour les éléments.

box-shadow

L'attribut box-shadow de CSS3 donne à l'élément un effet d'ombre. Sa syntaxe est la suivante :

   box-shadow:<length> <length> <length> | color:

où la première longueur est la. Valeur de décalage du niveau d'ombre ; la deuxième valeur de longueur est la valeur de décalage vertical de l'ombre ; la troisième valeur est la valeur de flou d'ombre. Les valeurs de décalage horizontal et vertical​​peuvent prendre des valeurs positives et négatives, telles que 4px ou -4px

À l'heure actuelle, box-shadow est pris en charge par la plupart des navigateurs modernes. Cependant, lorsque nous utilisons cet attribut sur des navigateurs basés sur Webkit tels que Chrome et Safari, nous devons écrire le nom de l'attribut sous la forme -webkit-box-shadow. Pour le navigateur Firefox, il doit être écrit sous la forme -moz-box-shadow.

Le code suivant est un exemple simple d'utilisation de box-shadow, qui est compatible avec les navigateurs Chrome, Safari et Firefox :

<style type="text/css">
        p
        {
            /* 其他浏览器 */
            box-shadow: 3px 4px 2px #000;
            /* webkit内核浏览器 */
            -webkit-box-shadow: 3px 4px 2px #000; 
            /* Firefox浏览器 */
            -moz-box-shadow: 3px 4px 2px #000;
            padding:5px 4px;
        }
    </style>

text-shadow

text- Attribut d'ombre Utilisé pour définir l'effet d'ombre ou l'effet de flou du contenu du texte.

Actuellement, l'attribut text-shadow est pris en charge par les navigateurs Safari, Firefox, Chrome et Opera. Les navigateurs inférieurs à IE8 ne prennent pas en charge cette fonctionnalité. Et la plupart des navigateurs Web mobiles sont bien pris en charge.

La syntaxe de text-shadow est fondamentalement la même que celle de box-shadow :

box-shadow:d82af2074b26fcfe177e947839b5d381 d82af2074b26fcfe177e947839b5d381 >

Le code suivant est un exemple simple et pratique de text-shadow :

 <style type="text/css">
        p
        {
            text-shadow: 5px -10px 5px red;
            color:#666;
            font-size:16px;
        }
    </style>

Arrière-plan

Dans la spécification CSS3, CSS3 ajoute de nombreuses nouvelles fonctionnalités à l'arrière-plan attribut. Il prend en charge à la fois la plage d’affichage de l’arrière-plan et plusieurs arrière-plans d’images. La chose la plus importante est qu'il peut définir des dégradés ou des effets de couleur pour la couleur d'arrière-plan via les paramètres d'attributs, ce qui est très polyvalent.

CSS3 améliore l'attribut background. Dans le passé, nous utilisions des images pour remplacer diverses modifications de page, et progressivement elles peuvent être remplacées par l'attribut background. Ces fonctionnalités améliorent la vitesse de chargement des pages, en particulier sur les plates-formes d'appareils mobiles, et améliorent les performances des pages.

background-size

L'attribut background-size est utilisé pour définir la taille de l'image d'arrière-plan.

Cet attribut est actuellement pris en charge par les navigateurs Chrome, Safair et Opera. Il prend également en charge les navigateurs Web sur les plateformes Android et IOS.

L'attribut background-size présente certaines différences de syntaxe selon les navigateurs Web. Dans les navigateurs Chrome et Safari basés sur le noyau Webkite, la méthode d'écriture est -webkit-background-size;

Dans les projets de développement mobile, il est recommandé d'utiliser la méthode d'écriture en mode compatibilité, l'exemple est le suivant :

 <style type="text/css">
        p
        {
            background-size:10px 5px;
            -webkit-backgriud-size:10px 5px;
        }
    </style>

background

L'attribut background se voit attribuer une fonction très puissante en CSS3. L’une des fonctionnalités très importantes concerne les arrière-plans multiples. Dans le passé, une seule image pouvait être utilisée, mais plusieurs images d'arrière-plan peuvent être définies en CSS3 avec la syntaxe suivante :

  background:url(bg.jpg) left top no-repeat,
                             url(bg2.jpg) left top no-repeat;

Les navigateurs Chrome et Safari prennent en charge plusieurs images d'arrière-plan avec l'attribut background. Puisqu'il s'agit de navigateurs basés sur Webkit, cette fonctionnalité est également prise en charge par les navigateurs mobiles sur les plateformes Android et IOS. Cependant, étant donné que la définition de l'arrière-plan à l'aide d'images affectera sérieusement l'expérience globale et les performances sur le Web mobile, nous utilisons une fonctionnalité de Webkit pour utiliser un dégradé de couleurs pour l'arrière-plan au lieu d'utiliser des images. La syntaxe est la suivante :

      -webkit-gradient(<type>, <type> [,<radius> ]?,<point> [, <radius> ]? [, <stop> ]*)

Le type type fait référence au type de dégradé, tel que dégradé linéaire linéaire ou dégradé radial radial. Le code suivant :

<style type="text/css">
        p
        {
            background: -webkit-gradient(linear,0 0,0 100%,form(#ff),to(#000));
        }
</style>

Bordure arrondie

L'effet de coin arrondi peut être facilement obtenu en CSS3. Vous pouvez obtenir l'effet de coin arrondi tant que vous définissez l'attribut border-radius dans. le code.

Jusqu'à présent, cet attribut était pris en charge par les navigateurs Chrome, Safari, Opera et Firefox. Cependant, il existe certaines différences dans les méthodes d'écriture entre les navigateurs. Par exemple : les navigateurs Chrome et Safari doivent écrire -webkit-border-radius ; les navigateurs Firefox doivent écrire -moz-border-radius ; l'exemple de code compatible est le suivant :

<style type="text/css">
        p
        {
             border-radius:10px 5px;
             /* Firefox浏览器 */
             -moz-border-radius:10px 5px;
             /* webkit 内核浏览器 */
             -webkit-border-radius:10px 5px;
        }
    </style>

A noter que l'attribut border-radius n'est pas autorisé à utiliser des valeurs négatives. Lorsque l'une d'elles est 0, le coin correspondant à la valeur est un rectangle, sinon c'est un coin arrondi.

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!