CSS边框与背景属性

2019-04-15

边框属性

边框基本属性

属性名	用途
border-style	边框的样式
border-color	边框的颜色
border-width	边框的宽度
border	综合属性，对边框宽度、样式、颜色进行统一设置。 border: 宽度样式颜色 ;
border-top	综合设置上边框
border-right	综合设置右边框
border-bottom	综合设置下边框
border-left	综合设置左边框

border-style的取值

参数名	含义
none	无样式
solid	实线
outset	外凸
groove	槽线
dotted	点划线
dashed	虚线
inset	内凹
ridge	脊线
double	双线

可以按照top-right-bottom-left的顺序设置元素各边框的样式

border-color:red green blue orange;四个边四种颜色

border-color:red green blue orange;上下边同色，左右边同色

表格边框属性

1. border-collapse

设置表格边框是否合并为单一边框。效果与cellspacing相同

值	描述
separate	默认值。边框会分开。不会忽略 border-spacing 属性。
collapse	边框合并为单一边框。忽略 border-spacing 和 empty-cells 属性。

2. border-spacing

border-collapse设置为separate时有效。指定单元格之间的距离。两个长度值中第一个是水平间隔，第二个是垂直间隔。

值	描述
length length	规定相邻单元格边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，代表的是水平和垂直间距。如果定义两个 length 参数，则第一个设置水平间距，第二个设置垂直间距。

3. 圆角边框(border-radius)

border-radius:150px;

角度达到宽高的50%呈现圆形，继续增大形状不会再有变化。

border-radius属性可包含两个参数值：
第一个值表示圆角的水平半径，第二个值表示圆角的垂直半径，两个参数通过斜线分隔。

可以为元素的4个角设置不同弧度：

border-top-left-radius:30px; /*左上角*/
border-top-right-radius:40px; /*右上角*/
border-bottom-left-radius:50px; /*左下角*/
border-bottom-right-radius:60px; /*右下角*/

4.边框阴影(box-shadow)

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

各参数的组合顺序：box-shadow: h-shadow v-shadow blur spread color inset

背景属性

背景基本属性

值	描述
background-color	背景颜色。
background-image	背景图像，默认平铺，url('URL')格式
background-repeat	定义了图像的平铺模式。设置是否及如何重复背景图像。
background-position	规定背景图像的起始位置。
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。
background	综合属性

background-repeat

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。

background-position

值	描述
top left right bottom center	配合使用例：top right（右上角）如果只有一个关键词，那么第二个默认为center 例：top（左右居中靠上）
x% y%	0% 0%是左上角，100% 100%右上角，如果只写一个另一个则为50%
xpos ypos	像素值

background-attachment

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。

background
可以按顺序综合设置如下属性（某个属性值可以缺省)：
background-color
background-image
background-repeat
background-attachment
background-position

定义多背景图像

css3可以在一个元素里显示多个背景图像。图像根据浏览器中叠放顺序从上往下指定，第一个图像放在最上面，最后指定的图像放在最下面。

background:
          url(images/001.jpg) no-repeat,
          url(images/002.jpg) no-repeat 100px 100px,
          url(images/003.jpg) no-repeat 200px 200px;

背景尺寸属性

background-size主要参数

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

透明度(opacity)

接受小于等于1的小数作为参数，默认值为1（不透明）。