CSS边框与背景

CSS定位(position)：相对定位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：

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

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

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

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

最后编辑：2019-03-08

作者：qingheluo

这个作者貌似有点懒，什么都没有留下。

站内专栏