首页 > html5+css > css基础知识 > CSS边框与背景
2016
12-16

CSS边框与背景

CSS定位:相对定位resition、绝对定位absolute和fixed

resition基于文档流的位置,原文档流位置保留

absolute基于父元素,脱离文档流,原文档流位置不保留

fixed基于浏览器窗口,脱离文档流,原文档流位置不保留

边框:

边框border的样式:

none:没有边框 solid:实线边框 dashed:破折线边框 dotted:圆点线边框

double:双线边框 groove:槽线边框 ridge:脊线边框

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

使用 border-radius 属性可以设置圆角边框:

border-radius:长度值或百分数 四条边角

border-top-left-radius:长度值或百分数 左上边角

border-top-right-radius:长度值或百分数 右上边角

border-bottom-left-radius:长度值或百分数 左下边角

border-bottom-right-radius:长度值或百分数 右下边角

设置圆角矩形:div { border: 10px solid red; border-radius: 10px; }

四条边分别设置:div { border: 10px solid red; border-radius: 10px 20px 30px 40px; }(上右下左)

背景

background-color 背景的颜色
background-image none或url,背景图片
background-repeat 样式名称,背景图片的平铺样式
background-size 长度值,背景图像的尺寸
background-position 位置坐标,背景图像的位置
background-attachment 滚动方式,背景图片的滚动
background-clip 裁剪方式,背景图片的裁剪
background-origin 位置坐标,背景图片起始点
background 复合值,背景图片简写方式

background-color:

颜色值 设置背景颜色为指定色

transparent 设置背景颜色为透明色

background-image:

none:取消背景图片的设置

url:通过 URL 设置背景图片

background-repeat:

repeat-x:水平方向平铺图像

repeat-y:垂直方向平铺图像

repeat:水平和垂直方向同时平铺图像

no-repeat:禁止平铺图像

background-position:

top/bottom:将背景图片定位到元素顶部/底部

left/right:将背景图片定位到元素左部/右部

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

长度值 使用长度值偏移图片的位置:background-position:10px 20px;(10px为向左偏移量,20px为向上偏移量)

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

background-size:

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

cover:等比例缩放图像,使图像至少覆盖容器,但有可能超出容器

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

长度值:CSS 长度值,如 px、em,有两个数值,第一个为长度,第二个为高度

百分数:一个百分数,如56%,背景图片会占用总容器的容量大小

background-attachment:

scroll:默认值,背景固定在元素上,会随着内 容一起滚动

fixed:背景固定在视窗上,内容滚动时背景不动:会导致背景产生水印效果,拖动滚动条而背景不动。

background-origin:

border-box:在元素盒子内部绘制背景,背景绘制时会包含边框在内。

padding-box:在内边距盒子内部绘制背景,默认值,背景绘制时不会包含边框。

content-box:在内容盒子内部绘制背景,背景绘制时不包含边框和内边距,只包含内容部分。

background-clip:

border-box:在元素盒子内部裁剪背景,默认值,背景绘制时会裁剪边框之外的内容(可以认为不裁剪)

padding-box:在内边距盒子内部裁剪背景,背景绘制时会裁剪掉边框内的背景。

content-box:在内容黑子内部裁剪背景,背景绘制时会裁剪掉边框和内边距的背景,只保留内容部分背景

background:

符合顺序:color image repeat attachment position/size origin clip

颜色,背景图片,平铺方式,是否滚动,位置定位,背景尺寸,绘制背景,裁剪背景

同时有背景定位和背景尺寸时两个数据之间要用“/”隔开,其他用空格隔开

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。