声明边框
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];