Detailed explanation of CSS3 background related style example code-CSS Tutorial-php.cn

Detailed explanation of CSS3 background related style example code

高洛峰

Release： 2017-03-16 09:47:54

Original

2111 people have browsed it

This article explains in detail the CSS3 background-related style example code

background-imageDraw multiple pictures overlay, the example is as follows:

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

Copy after login

background-clip: Specifies the drawing area of the background:
background-origin: Positions it relative to the content box Background image:

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

Copy after login

The box-shadow attribute of css3:

How to make ie6, 7, and 8 support border-radius, box-shadow, text-shadow :Use ie-css3.htc

First download the ie-css3.htc script, and then add it to the css:

How to use it is: download it and put it in your server directory

Write the following code in your :

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

Copy after login

Note: behavior: ie-css3 in url(ie-css3.htc). Use an absolute path for the htc address or pass it directly to the root directory of the website, otherwise you may not see the effect.

•When you use this htc file, as long as box-shadow, -moz-box-shadow or -webkit-box-shadow is written in your CSS, IE will render it. .
•When using this htc file, you cannot write box-shadow: 0 0 10px red; but box-shadow: 0px 0px 10px red; otherwise it will fail in IE.
•Alpha transparency in RGBA values is not supported.
•Inset inner shadow is not supported.
•Shadow expansion is not supported.
•Shadows will only appear black in IE, no matter what other colors you set.
However, this script only allows IE to support some box-shadow values.

The above is the detailed content of Detailed explanation of CSS3 background related style example code. For more information, please follow other related articles on the PHP Chinese website!