框线与背景

**

一.

**
框线与背景定位
背景与框线定位的几种情况（background-origin设置背景的定位区域）：

1. background-origin:border-box/背景图像相对于边框盒来定位/

.s1{ background-origin:border-box;/*背景图像相对于边框盒来定位*/
-moz-background-origin:border; } 

2. background-origin:padding-box;/背景图像相对于内边距框来定位/

.s2{ background-origin:padding-box;/*背景图像相对于内容框盒来定位*/
-moz-background-origin:border; 
} 

3. background-origin:content-box;/背景图相对于内容框来定位/

.s3{
background-origin:content-box;/*背景图相对于内容框来定位*/
-webkit-background-origin:content-box;
}

各自效果图如下：
1.
2.

3.

**

二.

**

设置边框border样式有几种选择

1. solid正常属性

div{
width:500px;
height:400px;
border:1px solid blue;
}
如图

2. dashed虚线

div{
width:400px;
height:180px;
border:10px dashed red;/*设置边框为粗体虚线*/
}

如图所示：

3. dotted虚线也称点线

div {
width: 400px;
 height: 80px;
        border: 10px dotted #930;
        }

如图：

**

三.

**

设置背景图与div边框的距离可用padding
例：

div{
width:400px;
height:180px;
padding:20px;/*设置内边距为20像素*/
}

不设边距时：

设边距时为：

**

四.

**
设置圆角背景图框border-radius

只有上圆角

.s1{
border-radius:20px;/*向div元素添加圆角边框为20像素*/
border:3px solid #099;
background-color:#033;
}

如图：

上下圆角

.s2{
border-radius:30px 50px;
border:3px solid #099;
background-color:#033;
}

如图：

精细设置各角角度

.s3{
width: 400px;
 height: 150px;
 border-top-left-radius:     30px;
 border-top-right-radius:    1em 3em;
 border-bottom-right-radius: 4em 0.5em;
 border-bottom-left-radius:  70px 90px;
 text-align: center;
 font-weight: bolder;
 color:#F00;
 background-image: url("image/life.jpg");
}

如图：