目录
border-bottom|top-left|right-radius
border-bottom|top|right|left-color
border-bottom|top|right|left-width
border-bottom|top|right|left-style
background
背景相关属性,可以连续定义5个属性background-color、background-url 、background-repeat、background-attachment、background-position。
例如:background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
注意点
1.渐变色是background-image属性。
2.background是一个集合属性,当定义了background后,后面定义的分属性比如background-repeat是不会生效的。
background-color
规定要使用的背景颜色。这种颜色会填充元素的内容、内边距和边框区域,扩展到元素边框的外边界(但不包括外边距)。如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色。
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
transparent | 默认。背景颜色为透明。 |
background-url
为元素设置背景图像。元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距。
默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复。
值 | 描述 |
---|---|
url('URL') | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
background-repeat
定义了图像的平铺模式。默认地,背景图像在水平和垂直方向上重复。
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像(文字会移动)不会移动(其余部分会覆盖在背景上面)。 |
注意: 定义了background-attachment:fixed的元素上如果有文字,文字时不会固定,如果想要文字也固定,则需要设置position:fixed,然后其他内容设置为position:absolute,z-index:97,top:404px,其中z-index是让内容能覆盖显示,top是让初始不覆盖,这时就能实现滚动时下面内容覆盖上面背景图片及文字。
background-position
设置背景图像的起始位置。背景图像如果要重复,将从这一点开始。
值 | 描述 |
---|---|
| 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
background-origin
规定 background-position 属性相对于什么位置来定位。
注意:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
值 | 描述 | 测试 |
---|---|---|
padding-box | 背景图像相对于内边距框来定位。 | 测试 |
border-box | 背景图像相对于边框盒来定位。 | 测试 |
content-box | 背景图像相对于内容框来定位。 | 测试 |
background-size
规定背景图像的尺寸。
值 | 描述 | 测试 |
---|---|---|
length | 设置背景图像的高度和宽度。例如 10px 20px。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"(auto是按等比放缩)。 | 测试 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。 第一个值设置宽度,第二个值设置高度。 如果只设置一个值,则第二个值会被设置为 "auto"。 | 测试 |
cover | 把背景图像等比放大到完全覆盖背景区域(超出覆盖背景区域部分图片不显示)。 背景图像的某些部分也许无法显示在背景定位区域中。 | 测试 |
contain | 把图像等比放大至不超出背景区域的最大尺寸(无法完全覆盖背景区域)。 | 测试 |
background-clip
规定背景的绘制区域即背景区域。
值 | 描述 | 测试 |
---|---|---|
border-box | 背景被裁剪到边框盒。 | 测试 |
padding-box | 背景被裁剪到内边距框。 | 测试 |
content-box | 背景被裁剪到内容框。 | 测试 |
background-blend-mode
定义每个背景层(颜色和/或图像)的混合模式(一个元素的background-img有多张时的背景图片混合覆盖效果)。
值 | 描述 |
---|---|
normal | 默认。把混合模式设置为普通。 |
multiply | 把混合模式设置为 multiply(乘)。 |
screen | 把混合模式设置为 screen(屏幕)。 |
overlay | 把混合模式设置为 overlay(覆盖)。 |
darken | 把混合模式设置为 overlay(覆盖)。 |
lighten | 把混合模式设置为 lighten(变亮)。 |
color-dodge | 把混合模式设置为 color-dodge(颜色减淡)。 |
saturation | 把混合模式设置为 saturation(饱和度)。 |
color | 把混合模式设置为 color(颜色)。 |
luminosity | 把混合模式设置为 luminosity(亮度)。 |
background-image
设置一个元素的背景图像。
值 | 说明 |
---|---|
url('URL') | 图像的URL |
none | 无图像背景会显示。这是默认 |
linear-gradient() | 创建一个线性渐变的 "图像"(从上到下) |
radial-gradient() | 用径向渐变创建 "图像"。 (center to edges) |
repeating-linear-gradient() | 创建重复的线性渐变 "图像"。 |
repeating-radial-gradient() | 创建重复的径向渐变 "图像" |
骨架图应用
::after{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to left, #fff, #dedede,#fff);
background-size: 150% 100%;
animation: shine 1.5s infinite 0s linear;
}
@keyframes shine {
0% {
background-position-x: 150%;
}
50% {
background-position-x: 0%;
}
100% {
background-position-x: -150%;
}
}
background属性的相关实例
border
在一个声明设置所有的边框属性。可以按顺序设置border-width、border-style、border-color属性。例如:border:5px solid red。
border-width
为元素的所有边框设置宽度,或者单独地为各边边框设置宽度,1个值对应全部,2个值分别对应上下、左右,3个值对应上、左右、下,4个值分别对应上、右、下、左。
注意:只有当边框样式(border-style)不是 none 时才起作用。如果边框样式是 none,边框宽度实际上会重置为 0。不允许指定负长度值。
值 | 描述 |
---|---|
thin | 定义细的边框。 |
medium | 默认。定义中等的边框。 |
thick | 定义粗的边框。 |
length | 允许您自定义边框的宽度px。 |
border-style
用于设置元素所有边框的样式,或者单独地为各边设置边框样式。1个值对应全部,2个值分别对应上下、左右,3个值对应上、左右、下,4个值分别对应上、右、下、左。
值 | 描述 |
---|---|
none | 定义无边框。 |
hidden | 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 |
dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
solid | 定义实线。 |
double | 定义双线。双线的宽度等于 border-width 的值。 |
groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
border-color
可设置一个元素的所有边框中可见部分的颜色,或者为 4 个边分别设置不同的颜色。1个值对应全部,2个值分别对应上下、左右,3个值对应上、左右、下,4个值分别对应上、右、下、左。
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的边框颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。 |
transparent | 默认值。边框颜色为透明。 |
border-image
可以设置border-image-source、border-image-slice、border-image-repeat属性。例如:border-image:url(border.png) 30 30 30 30round,其中见的数字时border-image-slice的属性值。
下面也看不懂的,可以看看链接。
border-image属性分析_foreverling_ling的博客-CSDN博客_border-image-slice
border-image-source
规定要使用的图像,代替 border-style 属性中设置的边框样式。例如:border-image-source: url(border.png)。
border-image-slice
4个值,定义4条线的位置(图片边框向内偏移的距离)。格式:border-image-slice:top right bottom left。分别指切割背景图片的四条线距离上右下左的距离。 1个值对应全部,2个值分别对应上下、左右,3个值对应上、左右、下,4个值分别对应上、右、下、左。如下图所示:
该距离接受数值,百分数。默认数值的单位是px,但是不能在数值后面加px,否则这句css将不被浏览器解析。
分割背景图片后每个区域的内容会被填充到边框对应的区域中(border也被划分了8个区域即除了5区域),如果为fill的话,5区域的背景图片会保留填充到content+padding区域。
值 | 描述 |
---|---|
number | 数字值,代表图像中像素(如果是光栅图像)或矢量坐标(如果是矢量图像)。 |
% | 相对于图像尺寸的百分比值:图像的宽度影响水平偏移,高度影响垂直偏移。 |
fill | 保留边框图像的中间部分。 |
border-image-repeat
规定图像边框是否应该被重复(repeated)、拉伸(stretched)或铺满(rounded)。被border-image-slice分割后的背景图片填充到对应的border区域时,图像以什么方式填充。
值 | 描述 |
---|---|
stretch | 拉伸图像来填充区域 |
repeat | 平铺(重复)图像来填充区域。 |
round | 类似 repeat 值。如果无法完整平铺所有图像,则对图像进行缩放以适应区域。 |
border-image-outset
规定边框图像超出边框盒的量。 1个值对应全部,2个值分别对应上下、左右,3个值对应上、左右、下,4个值分别对应上、右、下、左。理解为border宽度不变,4个方向上加padding使得背景图片渲染的位置向外扩展相应的范围。重点是宽度不变,位置改变。实际border和padding都不会改变。
值 | 描述 |
---|---|
length | 允许您自定义边框的宽度px。 |
number | 代表对应的 border-width 的倍数。 |
border-image-width
规定将边框图像分割为九个部分的偏移。1个值对应全部,2个值分别对应上下、左右,3个值对应上、左右、下,4个值分别对应上、右、下、左。理解为缩小4个方向的padding(不够就缩小content)缩小,使得4个方向上的border宽度增大。重点是border围成的面积不变,宽度改变。实际border和padding都不会改变。
值 | 描述 |
---|---|
number | 代表对应的 border-width 的倍数。 |
% | 参考边框图像区域的尺寸:区域的高度影响水平偏移,宽度影响垂直偏移。 |
auto | 如果规定该属性,则宽度为对应的图像切片的固有宽度。 |
border-radius
允许您为元素4个方向添加圆角边框。1个值对应全部,2个值分别对应上下、左右,3个值对应上、左右、下,4个值分别对应上、右、下、左。例如下图:
值 | 描述 | 测试 |
---|---|---|
length | 定义圆角的形状。 | 测试 |
% | 以百分比定义圆角的形状。 | 测试 |
border-collapse
设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。
值 | 描述 |
---|---|
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
border-spacing
设置相邻单元格的边框间的距离。在指定的两个长度值中,第一个是水平间隔,第二个是垂直间隔。例如下图:红色部分1位垂直间隔,2位水平间隔。
注意:需要 border-collapse 被设置为 separate,否则将忽略这个属性。
值 | 描述 |
---|---|
length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个 length 参数,那么定义的是水平和垂直间距。 如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。 |
单边方向border属性
border-bottom|top-left|right-radius
单独设置底部或顶部对应的左或右的圆角。注意left|right不能写在前面。
border-bottom|top|right|left-color
单独设置4个方向border的颜色。
border-bottom|top|right|left-width
单独设置4个方向border的宽度。
border-bottom|top|right|left-style
单独设置4个方向border的样式。