Maison > interface Web > tutoriel CSS > le corps du texte

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

小云云
Libérer: 2018-01-17 17:20:18
original
4615 Les gens l'ont consulté

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>
Copier après la connexion

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;
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal