Implémentation frontale Html/CSS du partage d'exemples d'effet d'ombre de bordure de texte

L'utilisation d'effets d'ombre est devenue de plus en plus répandue dans le développement, nous allons donc parler aujourd'hui de l'utilisation de la même technique pour obtenir des ombres de bordure. Ci-dessous, l'éditeur de Script House vous propose le front-end Html/CSS pour réaliser l'effet d'ombre de bordure de texte. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Border shadow

box-shadow Border shadow

Paramètres : Paramètre 1 x-shadow : Définissez la valeur de décalage horizontal de l'ombre de l'objet, l'unité peut être px , em Ou pourcentage, etc., les valeurs négatives sont autorisées. Paramètre 2 y-shadow : Définissez la valeur de décalage vertical de l'ombre de l'objet. L'unité peut être px, em ou pourcentage, etc. Les valeurs négatives sont autorisées. Paramètre 3 flou : utilisé pour définir la taille du rayon de l'ombre de la bordure. Paramètre 4 : étendre le rayon, définir la taille de l'ombre ; ce paramètre est facultatif et la valeur par défaut est 0. Paramètre 5 couleur : Définissez la couleur de l’ombre. Encart paramètre 6 : Ce paramètre n’est pas défini par défaut. La valeur par défaut est l'ombre extérieure, l'encart signifie l'ombre intérieure.

box-shadow : x-shadow y-shadow flou propagation couleur encart ;

Exemple

Effet 1

Effet 2

Comment obtenons-nous l'effet dans l'image ci-dessus ?

Structure HTML Style CSS style de police couleur de police ombre de bordure Prenons un regarde Voici le code spécifique :

HTML :

<p class="box">box-shadow</p>

CSS :

.box{
    width:300px;
    height:150px;
    background: deepskyblue;
    font:30px/150px 'Microsoft YaHei';
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin:100px auto;
    /*边框阴影*/
    /*效果1*/
    box-shadow: inset 5px 5px 20px #ccc;
    /*效果2*/
    box-shadow: inset 5px 5px 20px pink,5px 5px 20px #000;
}

Recommandations associées :

Utiliser box-shadow de la méthode CSS3 pour créer un effet d'ombre de bordure en utilisant les attributs

bordure arrondie CSS3, border shadow_html/css_WEB-ITnose

css pour obtenir un effet d'ombre de bordure_ html/css_WEB-ITnez

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!