CSS3 배경 관련 스타일 예제 코드에 대한 자세한 설명-CSS 튜토리얼-php.cn

CSS3 배경 관련 스타일 예제 코드에 대한 자세한 설명

高洛峰

풀어 주다： 2017-03-16 09:47:54

원래의

2105명이 탐색했습니다.

이 글에서는 CSS3 배경 관련 스타일 예제 코드

배경 이미지여러 그림오버레이 그리기에 대해 자세히 설명합니다. 예제는 다음과 같습니다.

<!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: 배경의 그리기 영역을 지정합니다.
background-origin: 내용을 기준으로 위치를 지정합니다. box 배경 이미지:

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

로그인 후 복사

CSS3의 box-shadow 속성:

ie6, 7, 8에서 border-radius, box-를 지원하도록 만드는 방법 Shadow 및 text-shadow :ie-css3.htc 사용

먼저 ie-css3.htc 스크립트를 다운로드한 다음 CSS에 추가합니다.

방법 그것을 사용하는 방법은: 다운로드하여 서버 디렉토리에 넣는 것입니다.

에 다음 코드를 작성하세요.

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

로그인 후 복사

참고: 동작: url(ie-css3.htc)의 ie-css3 절대 경로를 사용하세요. 또는 htc 주소를 웹사이트의 루트 디렉토리에 직접 전달하십시오. 그렇지 않으면 효과가 나타나지 않을 수 있습니다.

•이 htc 파일을 사용할 때 box-shadow, -moz-box-shadow 또는 -webkit-box-shadow가 CSS에 작성되어 있는 한 IE는 이를 렌더링합니다.
•이 htc 파일을 사용할 때 box-shadow: 0 0 10px red는 쓸 수 없지만 box-shadow: 0px 0px 10px는 쓸 수 없습니다. 빨간색, 그렇지 않으면 IE에서 실패합니다.
• RGBA 값의 알파 투명도는 지원되지 않습니다.
•인셋 내부 그림자는 지원되지 않습니다.
• 섀도우 확장은 지원되지 않습니다.
•다른 색상을 설정하더라도 IE에서는 그림자가 검은색으로만 나타납니다.
그러나 이 스크립트는 IE가 일부 box-shadow 값만 지원하도록 허용합니다.

위 내용은 CSS3 배경 관련 스타일 예제 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!