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<br /> left<br /> right<br /> bottom<br /> center | 配合使用<br /> 例：top right（右上角）<br /> 如果只有一个关键词，那么第二个默认为center<br /> 例：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（不透明）。
网友评论