CSS3学习系列之背景相关样式（一）
2021-07-08 00:05
标签：class policy radius webkit -o repeat-x 绘制 black div2 background-clip:指定背景的显示范围 background-origin：指定绘制背景图像时的起点 background-size：指定背景中图像的尺寸 background-break：指定内联元素的背景图像进行平铺时的循环方式 在HTML页面中，一个具有背景的元素通常由元素的内容、内容补白（padding）、边框、外部补白（margin）构成。 元素背景的显示范围在css2与css2.1、css3中的并不相同，在css2中，背景的显示范围是指内部补白之内的范围，不包括边框；而在css2.1至css3中，背景的显示范围是指包括边框在内的范围，在css3中，可以使用background-clip来修改背景的显示范围，如果将background-clip的属性值设定为border，则背景范围包括边框区域，如果设定为padding则不包括边框区域。例子如下： （有出入） 在绘制背景图像时，默认是从内部补白（padding）区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。 例子如下： 在css3中，可以使用background-size属性来指定背景图像的尺寸，例子如下： 将background-break属性指定为bounding-box的时候，背景图像在整个内联元素中进行平铺，指定为each-box的时候，背景图像在每一行中进行平铺，指定为continuous的时候，下一行中的图像紧接着上一行中的图像继续平铺，例子如下： 在css3中，只要使用border-radius属性指定好圆角的半径，就可以绘制圆角边框了。例子如下： CSS3学习系列之背景相关样式（一） 标签：class policy radius webkit -o repeat-x 绘制 black div2 原文地址：http://www.cnblogs.com/hetaojs/p/7098525.html
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>两种background-clip属性值的对比示例title>
style>
div {
background-color: black;
border: dashed 15px green;
padding: 30px;
color: white;
font-size: 30px;
font-weight: bold;
margin: 50px 0;
}
div.div1 {
-moz-background-clip: border;
-webkit-background-clip: border;
background-clip: border;
}
div.div2 {
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding;
}
style>
head>
body>
div id="div1">
示例
div>
div id="div2">
示例里
div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>background-origin属性使用示例title>
style>
div {
background-color: black;
border: dashed 15px green;
padding: 30px;
color: white;;
font-size: 2em;
font-weight: bold;
}
div.div1 {
-moz-background-origin: border;
-webkit-background-origin: border;
background-origin: border-box;
}
div.div2 {
-moz-background-origin: padding;
-webkit-background-origin: padding;
background-origin: padding-box;
}
div.div3 {
-moz-background-origin: content;
-webkit-background-origin: content;
background-origin: content-box;
}
style>
head>
body>
div id="div1">
示例
div>
div id="div2">
示例里
div>
div id="div3">
示例里示例里
div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>background-size属性的使用示例title>
style>
div{
background-color: black;
background-image: url(flower-red.png);
padding:30px;
color:white;
font-size:2em;
font-weight: bold;
background-size: 40px 20px;
-webkit-background-size: 40px 20px;
}
style>
head>
body>
div>
示例
div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>background-break属性的使用示例title>
style>
span{
background-color: #888888;
background-image: url(flower-green.png);
padding: 0.2em;
color:gray;
line-height: 1.5;
font-size: 1em;
font-weight: bold;
}
div.div1 span{
-moz-background-inline-policy:bouding-box;
}
div.div2 span{
-moz-background-inline-policy:each-box;
}
div.div3 span{
-moz-background-inline-policy:continuous;
}
style>
head>
body>
div class="div1">
示例
div>
div class="div2">
示例
div>
div class="div3">
示例
div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>在一个元素中显示多个背景图像的示例title>
style>
div{
background-image: url(flower-red.png),url(flower-green.png),url(sky.jpg);
background-repeat: no-repeat,repeat-x,no-repeat;
background-position: 3% 98%, 85%,conter conter,top;
width:300px;
padding: 90px 0px;
}
style>
head>
body>
div>div>
body>
html>
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>绘制圆角边框示例title>
style>
div{
border:solid 5px blue;
border-radius:20px;
-moz-border-radius: 20px;
-o-border-radius:20px;
-webkit-border-radius: 20px;
background-color: skyblue;
padding: 20px;
width: 180px;
}
style>
head>
body>
div>文字问文字问文字问文字问文字问文字问文字问div>
body>
html>
下一篇：css 弹出层-透明层