Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Beispielcodes für den CSS3-Hintergrundstil
Detaillierte Erläuterung des Beispielcodes für den CSS3-Hintergrundstil
- 高洛峰Original
- 2017-03-16 09:47:542114Durchsuche
In diesem Artikel wird der Beispielcode für den CSS3-Hintergrundstil ausführlich erläutert
HintergrundbildZeichnen Sie mehrere BilderÜberlagerung, das Beispiel lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image绘制多张图片叠加</title>
<style>
div{
width:1100px;
height:800px;
background-image: url("../../image/icon1.jpg"),url("../../image/border3.jpg");
background-repeat: repeat-x,no-repeat ;
background-position:100%,100%,center,center;
border:5px solid #ff0000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-clip: Gibt den Zeichenbereich des Hintergrunds an:
background-origin: Positioniert den Hintergrundbild:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-clip及background-origin属性</title>
<style>
/*background-clip:规定背景的绘制区域：*/
/*background-origin:相对于内容框来定位背景图像：*/
div{
background: #fff000;
font-size: 30px;
border:10px dashed #0000ff;
padding:20px;
background-image: url("../../image/icon.png");
background-repeat:no-repeat;
}
.div2{
margin-top:30px;
background-origin: content-box;
background-clip: content-box;
}
.div3{
margin-top:30px;
background-origin: border-box;
background-clip: border-box;
}
.div4{
margin-top:30px;
background-origin: padding-box;
background-clip: padding-box;
}
</style>
</head>
<body>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
</body>
</html> Das Box-Shadow-Attribut von CSS3:Lassen Sie ie6, 7 und 8 den Randradius unterstützen, box-shadow und text-shadow Methode: Verwenden Sie ie-css3.htc
Laden Sie zuerst das Skript ie-css3.htc herunter und fügen Sie es dann dem CSS hinzu:
So verwenden Sie es: Laden Sie es herunter und legen Sie es in Ihrem Serververzeichnis ab
Schreiben Sie den folgenden Code in Ihren 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1:
.box{
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc);
}Hinweis: Verhalten: ie- in url(ie-css3.htc) Verwenden Sie den absoluten Pfad oder übergeben Sie die css3.htc-Adresse direkt an das Stammverzeichnis der Website, andernfalls sehen Sie den Effekt möglicherweise nicht. •Wenn Sie diese HTC-Datei verwenden, rendert der IE sie, solange box-shadow, -moz-box-shadow oder -webkit-box-shadow in Ihrem CSS geschrieben ist. •Wenn Sie diese HTC-Datei verwenden, können Sie nicht „box-shadow: 0 0 10px red“ schreiben, sondern „box-shadow: 0px 0px 10px“.
rot; andernfalls schlägt es im IE fehl.
• Alpha-Transparenz in RGBA-Werten wird nicht unterstützt.
•Das Einfügen eines inneren Schattens wird nicht unterstützt.
• Die Schattenerweiterung wird nicht unterstützt.
•Schatten werden im IE nur schwarz angezeigt, unabhängig davon, welche
anderen Farben Sie festlegen. Dieses Skript ermöglicht dem IE jedoch nur die Unterstützung einiger Box-Shadow-Werte.
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Beispielcodes für den CSS3-Hintergrundstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!