Maison >interface Web >tutoriel CSS >Explication détaillée de l'exemple de code de style lié à l'arrière-plan CSS3
Explication détaillée de l'exemple de code de style lié à l'arrière-plan CSS3
- 高洛峰original
- 2017-03-16 09:47:542168parcourir
Cet article explique en détail l'exemple de code de style CSS3 lié à l'arrière-plan
background-imageDessinez plusieurs imagessuperposition, l'exemple est le suivant :
<!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 : Spécifie la zone de dessin de l'arrière-plan :
background-origin : Positionne le image d'arrière-plan:
<!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> L'attribut box-shadow de CSS3 :Laissez ie6, 7 et 8 prendre en charge border-radius, box-shadow et text-shadow Méthode : utilisez ie-css3.htc
Téléchargez d'abord le script ie-css3.htc, puis ajoutez-le au CSS :
Comment l'utiliser : téléchargez-le et placez-le dans le répertoire de votre serveur
Écrivez le code suivant dans votre 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);
}Remarque : comportement : ie- dans l'url (ie-css3.htc) Utilisez le chemin absolu ou transmettez directement l'adresse css3.htc au répertoire racine du site Web, sinon vous risquez de ne pas voir l'effet. •Lorsque vous utilisez ce fichier HTC, tant que box-shadow, -moz-box-shadow ou -webkit-box-shadow est écrit dans votre CSS, IE le restituera. •Lorsque vous utilisez ce fichier HTC, vous ne pouvez pas écrire box-shadow : 0 0 10px red mais box-shadow : 0px 0px 10px ;
rouge ; sinon, il échouera dans IE.
• La transparence alpha dans les valeurs RGBA n'est pas prise en charge.
•L'ombre intérieure incrustée n'est pas prise en charge.
• L'extension Shadow n'est pas prise en charge.
•Les ombres n'apparaîtront en noir que dans IE, quelles que soient les
autres couleurs que vous définissez. Cependant, ce script permet uniquement à IE de prendre en charge certaines valeurs box-shadow.
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!