Effet d'ombre CSS : comment définir l'ombre de la bordure CSS ?-tutoriel CSS-php.cn

Effet d'ombre CSS : comment définir l'ombre de la bordure CSS ?

不言

Libérer： 2018-09-05 17:20:06

original

10430 Les gens l'ont consulté

Dans le processus de conception Web, nous devons souvent définir des effets spéciaux sur la page Web pour rendre la page Web conçue plus belle. Cet article vous présentera comment définir un effet d'ombre pour la bordure via CSS. L'effet d'ombre CSS peut être Il rendra le cadre conçu plus tridimensionnel. Sans plus tarder, examinons de plus près comment définir l'effet d'ombre de bordure CSS.

Lorsque nous définissons l'ombre de la bordure, un attribut essentiel est box-shadow box-shadow peut ajouter une ou plusieurs ombres à la boîte. Jetons un coup d'œil à un exemple spécifique.

<!DOCTYPE html>
<html>
<head>
<style> 
body{margin:30px;background-color:#E9E9E9;}
div.polaroid{width:294px;padding:10px 10px 20px 10px;border:1px solid #BFBFBF;background-color:green;
/* 设置阴影效果 */
box-shadow:5px 5px 6px #090;}
div.rotate_left
{float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);}
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284"    style="max-width:90%" />
<p class="caption">鲜花郁金香，花名：Ballade Dream。</p>
</div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Effet dombre CSS : comment définir lombre de la bordure CSS ?

Après avoir ajouté un effet d'ombre au cadre, est-il plus tridimensionnel et plus beau (le la couleur n'est peut-être pas la même) Ça a l'air si beau, mais vous pouvez choisir une combinaison plus belle... ^@^)

Explication : On voit que dans le code ci-dessus, il y a quatre valeurs d'attribut derrière l'ombre de la boîte. Que signifient-ils ?

Jetons un coup d'œil à la signification de la valeur de l'attribut box-shadow. (Recommandé : Exemple de propriété de bordure CSS)

box-shadow ajoute une ou plusieurs ombres à la boîte.

Cet attribut est une liste d'ombres séparées par des virgules, chaque ombre est spécifiée par 2 à 4 valeurs de longueur, des valeurs de couleur facultatives et le mot-clé d'encart facultatif. La valeur de la longueur omise est 0.

值	含义
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

Après avoir examiné la signification de chaque valeur d'attribut, nous pouvons connaître l'effet d'ombre défini dans l'exemple ci-dessus. Les quatre valeurs d'attributaprès l'attribut box-shadow sont : h-shadow. , v-shadow, flou, couleur.

Il existe de nombreux effets attrayants qui peuvent être obtenus en CSS. Si vous souhaitez en savoir plus sur les effets d'ombre CSS, vous pouvez vous référer au Manuel de référence de la dernière version de CSS3 sur le site Web chinois de PHP<.>

Manuel de référence de la dernière version de CSS3

Recommandations associées :

Effet d'ombre de la zone de saisie CSS3 et autres effets d'ombre_html/css_WEB-ITnose

css nécessite un effet d'ombre_html/css_WEB-ITnose

CSS implémente un effet de texte d'ombre_CSS/HTML

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!