suchen

Heim >Web-Frontend >CSS-Tutorial >So legen Sie den Titelschattenrand in CSS fest

So legen Sie den Titelschattenrand in CSS fest

奋力向前
奋力向前Original
2021-09-09 11:33:074364Durchsuche

Methode: 1. Verwenden Sie das Border-Attribut, um dem Titelelement einen Rahmen hinzuzufügen, mit der Syntax „border:width style color;“ 2. Verwenden Sie „text-align: center“, um den Titeltext zu zentrieren das box-shadow-Attribut, um dem Titelelement einen Rahmen hinzuzufügen. Fügen Sie dem Rahmen einen Schatteneffekt hinzu.

So legen Sie den Titelschattenrand in CSS fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

cssWie stelle ich den Titelschattenrand ein? 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>

代码效果

So legen Sie den Titelschattenrand in CSS fest

css阴影边框使用语法：

属性：box-shadow

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

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

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

Lassen Sie uns über css sprechen, wie man dem Titel einen Schattenrahmen hinzufügt.

rrreeeCodeeffekt

WeChat-Screenshot_20210909110606.png🎜🎜CSS-Schattenrand-Verwendungssyntax: 🎜🎜Attribut: box-shadow🎜🎜Verwendungsmethode: div{box-shadow: 001px #000inset;} Code>🎜🎜Analyse zur Verwendung von Schatten: Die erste Null bedeutet, dass der Abstand von der linken Seite des Objekts 0 ist und der Schatten angezeigt wird. Die zweite Null bedeutet, dass der Abstand vom Objekt zum linken Objekt beträgt ist 0 und der Schatten wird angezeigt, <code>1px stellt den Bereich des Schattens dar, 1px, #000 stellt die Farbe des Schattens dar, inset stellt den Schatten innerhalb des Objekts dar und wird nicht außerhalb des Objektschattens gesetzt. 🎜🎜Kompatibilitätsproblem: Firefox-Browserversion 3.5 und Google können das Attribut box-shadow unterstützen. 🎜🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonSo legen Sie den Titelschattenrand in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 对象 border
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So fügen Sie einem Text in CSS einen Hintergrund hinzuNächster Artikel：So fügen Sie einem Text in CSS einen Hintergrund hinzu

In Verbindung stehende Artikel

Mehr sehen