Explication détaillée de l'exemple de code de style lié à l'arrière-plan CSS3-tutoriel CSS-php.cn

Explication détaillée de l'exemple de code de style lié à l'arrière-plan CSS3

高洛峰

Libérer： 2017-03-16 09:47:54

original

2152 Les gens l'ont consulté

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>

Copier après la connexion

background-clip : Spécifie la zone de dessin de l'arrière-plan :
background-origin : Positionne le image d'arrière-plan<🎜 relative à la zone de contenu >:

<!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>

Copier après la connexion

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 :

.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); 
}

Copier après la connexion

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!