CSS3 배경 관련 스타일 예제 코드에 대한 자세한 설명
- 高洛峰원래의
- 2017-03-16 09:47:542115검색
이 글에서는 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에 추가합니다.
방법 그것을 사용하는 방법은: 다운로드하여 서버 디렉토리에 넣는 것입니다.
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);
}참고: 동작: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!