Maison > Article > interface Web > Comment définir la bordure de l'ombre du titre en CSS

Comment définir la bordure de l'ombre du titre en CSS

奋力向前original: 2021-09-09 11:33:074316parcourir

Méthode : 1. Utilisez l'attribut border pour ajouter une bordure à l'élément de titre, avec la syntaxe "border:width style color;" 2. Utilisez "text-align: center" pour centrer le texte du titre ; l'attribut box-shadow pour ajouter une bordure à l'élément titre Ajoutez un effet d'ombre à la bordure.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

cssComment définir la bordure de l'ombre du titre ? css如何设置标题阴影边框？

我们来讲一下css如何标题添加阴影边框。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	width:200px;
	height:200px;
	border:2px solid red;
	text-align: center;
	margin: 20px auto;
	line-height: 200px;
	box-shadow: red 10px 30px 5px;
}

</style>
</head>
<body>

<div>php中文网</div> 

</body>
</html>

代码效果

Comment définir la bordure de lombre du titre en CSS

css阴影边框使用语法：

属性：box-shadow

使用方法：div{box-shadow: 001px #000inset;}

阴影使用方法分析：第一个零代表距离对象左边距离为0，并且开始显示阴影，第二个零表示距离对象上间距对象为0，就开始显示阴影，1px表示阴影的范围1px，#000代表着阴影的颜色，inset表示对象内阴影，对象外就不设置阴影。

兼容问题：火狐浏览器3.5版本和谷歌都是可以支持box-shadow

Parlons de css comment ajouter une bordure ombrée au titre.

rrreeeEffet de code

WeChat capture d'écran_20210909110606.png

🎜🎜Syntaxe d'utilisation de la bordure fantôme CSS : 🎜🎜Attribut : box-shadow🎜🎜Méthode d'utilisation :

div{box-shadow: 001px #000inset;}  code>🎜🎜Analyse sur la façon d'utiliser les ombres : Le premier zéro signifie que la distance entre le côté gauche de l'objet est de 0, et l'ombre commence à s'afficher. Le deuxième zéro signifie que la distance entre l'objet et l'objet gauche. vaut 0, et l'ombre commence à s'afficher, <code>1px

représente la plage de l'ombre 1px, #000 représente la couleur de l'ombre, inset représente l'ombre à l'intérieur de l'objet et ne sera pas définie à l'extérieur de l'objet. 🎜🎜Problème de compatibilité : le navigateur Firefox version 3.5 et Google peuvent prendre en charge l'attribut box-shadow. 🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo CSS🎜🎜

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!

html5 css css3 对象 border

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

Article précédent：Comment ajouter un arrière-plan au texte en CSSArticle suivant：Comment ajouter un arrière-plan au texte en CSS

Articles Liés

Voir plus