Home > Article > Web Front-end > Detailed explanation of CSS3 background related style example code

Detailed explanation of CSS3 background related style example code

高洛峰Original: 2017-03-16 09:47:542058browse

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>

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>

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to using css3 layout attribute flexNext article：Detailed introduction to using css3 layout attribute flex

See more

Detailed explanation of CSS3 background related style example code

Related articles