Comment définir la bordure de l'ombre du titre en CSS-tutoriel CSS-php.cn

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

奋力向前

Libérer： 2023-01-07 11:47:43

original

4329 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

代码效果

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!