Heim > Artikel > Web-Frontend > So legen Sie den Titelschattenrand in CSS fest
So legen Sie den Titelschattenrand in CSS fest
- 奋力向前Original
- 2021-09-09 11:33:074320Durchsuche
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.
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>代码效果
css阴影边框使用语法：
属性：box-shadow
使用方法：div{box-shadow: 001px #000inset;}
阴影使用方法分析：第一个零代表距离对象左边距离为0，并且开始显示阴影，第二个零表示距离对象上间距对象为0，就开始显示阴影，1px表示阴影的范围1px，#000代表着阴影的颜色，inset表示对象内阴影，对象外就不设置阴影。
兼容问题：火狐浏览器3.5版本和谷歌都是可以支持box-shadow
css sprechen, wie man dem Titel einen Schattenrahmen hinzufügt. rrreeeCodeeffekt
🎜🎜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!
In Verbindung stehende Artikel
Mehr sehen- Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS3 einen coolen Navigationsleisteneffekt erstellen (detaillierte Codeerklärung).
- Bringen Sie Ihnen Schritt für Schritt bei, wie Sie mit CSS Text erstellen, um eine Frame-für-Frame-Animation (mit Code) zu erstellen.
- Ein Trick, um Ihnen beizubringen, wie Sie mit CSS3 Schaltflächen erstellen und dynamische Effekte hinzufügen (Code-Sharing)
- So zentrieren Sie die Seite in CSS
- So fügen Sie einem Text in CSS einen Hintergrund hinzu