CSS边框和背景

声明边框

border-width设置边框的宽度，可选

border-style设置边框的样式，必选

border-color颜色值设置边框的颜色，可选

最简单的边框

div{border-style:solid;}

解释：边框长度默认3px，边框颜色为黑色

配置完整的边框

div{

border-style:solid;

border-width:2px;

border-color:red;

}

解释：如果元素长和高均为200px时，四个边框均为1时，元素的长高总尺寸均为202px

边框样式

none没有边框

dashed破折线边框（虚线）

dotted圆点线边框

double双线边框（至少3个px）

groove槽线边框

inset使元素内容具有内嵌效果的边框

outset使元素内容具有外凸效果的边框

ridge脊线边框

solid实线边框

solid实线使用频率最高

div{

border-style:solid;

border-width:10px;

border-color:red;

}

四条边中某一条边单独进行设置

只设置顶端

div{

border-top-style:solid;

border-top-width:10px;

border-top-color:red;

}

只设置底部

div{

border-bottom-style:solid;

border-bottom-width:10px;

border-bottom-color:red;

}

只设置左侧

div{

border-left-style:solid;

border-left-width:10px;

border-left-color:red;

}

只设置右侧

div{

border-right-style:solid;

border-right -width:10px;

border-right -color:red;

}

四条变都一致

div{

border:10px solid red;

}

圆角边框

设置圆角矩形

div{

border:10px solidred;

border-radius:10px;

}

四条边分别设置

div{

border:10px solidred;

border-radius:10px 20px 30px 40px;

}

解释：

border-radius四条边角

border-top-left-radius左上边角

border-top-right-radius右上边角

border-bottom-right-radius右下边角

border-bottom-left-radius左下边角

 

border-top-right-radius: 40px;

设置背景

background-color

div{

background-color:silver;

}

解释：设置元素的背景颜色。属性值是颜色值。

div {

 

       width: 500px;

       height: 300px;

       background-color: silver;

}

div b{

background-color:transparent;

}

div b{

background-color:red;

}

<div>我是<b>HTML5</b>，我是<b>HTML5</b>，我是<b>HTML5</b>，</div>

解释：默认值为transparent，为透明的意思。这样<div>内部的元素就会继承<div>的背景色。一般来说这个属性使用频率很低，原因是不需要改变色彩时就默认，需要改变色彩时又是颜色值。

div b{

background-color:red;

}

 

div b:first-child {

    background-color: transparent;

}

background-image

body{

background-image:url(loading.gif);

}

解释：url里面是图片的路径，设置整个页面以这个图片为背景，如果图片不足以覆盖，则复制扩展。

div{

background-image:none;

}

解释：如果多个div批量设置了背景，而其中某一个不需要背景，可以单独设置none值取消背景。

background-repeat

body{

background-image:url(loading.gif);

background-repeat:no-repeat;

}

解释：让背景图片只显示一个，不平铺

repeat-x水平方向平铺图像

repeat-y垂直方向平铺图像

repeat水平和垂直方向同时平铺图像(默认)

no-repeat禁止平铺图像(如果图片不足以覆盖，则不会复制扩展。)

background-position

top将背景图片定位到元素顶部（top、center）

left将背景图片定位到元素左部（top 、left）

right将背景图片定位到元素右部（top、right）

bottom将背景图片定位到元素底部（bottom、right，必须有高度，否则和top的效果一样或者通过html设置100%  html {height: 100%;}）

center将背景图片定位到元素中部（center、center）

background-position: right  top;    右上角

background-position: left   bottom; 左下角

长度值使用长度值偏移图片的位置

百分数使用百分数偏移图片的位置

body{

background-image:url(loading.gif);

background-repeat:no-repeat;

background-position:top;

}

解释：将背景图片置于页面上方，如果想置于左上方则值为：top left。

body{

background-image:url(loading.gif);

background-repeat:no-repeat;

background-position:20px 20px;

}

解释：使用长度值或百分数，第一值表示左边，第二个值表示上边。

background-size

auto默认值，图像以本尺寸显示

cover等比例缩放图像，使图像至少覆盖容器，但有可能超出容器（包括拖动是大小的改变）

contain等比例缩放图像，使其宽度、高度中较大者与容器横向或纵向重合

长度值CSS长度值，比如px、em3

百分数比如：100%

body{

background-image:url(loading.gif);

background-size:cover;

}

解释：使用cover相当于100%，全屏铺面一张大图，这个值非常实用。在等比例放大缩小的过程中，可能会有背景超出，当然，这点无伤大雅。

div{

background-image:url(loading.gif);

background-size:contain;

}

解释：使用contain表示，尽可能让图片完整的显示在元素内。

body{

background-image:url(loading.gif);

background-size:240px 240px;

}

解释：长度值的用法，分别表示长和高

body{

background-image:url(loading.gif);

background-size:100%;

}

解释：

background-attachment

scroll默认值，背景固定在元素上

fixed背景固定在视窗上，内容滚动时背景不动

body{

background-image:url(loading.gif);

background-attachment:fixed;

}

解释：fixed属性会导致背景产生水印效果，拖动滚动条而背景不动

background-origin

border-box在元素盒子内部绘制背景

padding-box在内边距盒子内部绘制背景（默认，背景图片不会压到虚线）

content-box在内容盒子内部绘制背景

div{

width:400px;

height:300px;

border:10px dashed red;

padding:50px;

background-image:url(img.png);

background-repeat:no-repeat;

background-origin:content-box;

}

解释：设置背景起始位置

background-clip

border-box在元素盒子内部裁剪背景

padding-box在内边距盒子内部裁剪背景

content-box在内容黑子内部裁剪背

div{

width:400px;

height:300px;

border:10px dashed red;

padding:50px;

background-image:url(img.png);

background-repeat:no-repeat;

background-origin:border-box;

background-clip:padding-box;

}

解释：在内边距盒子内部裁剪背景

background

div{

width:400px;

height:300px;

border:10px dashed red;

padding:50px;

background:silver url(img.png)  no-repeat  scroll left top/100% border-box content-box;

}

解释：完整的简写顺序如下：

[background-color][background-image]

[background-repeat][background-attachment]

[background-position]/[background-size][background-origin][background-clip];