background、border属性详解(background-attachment|size|position|clip、border-image|image-slice|outset等)

值	描述
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

设置背景图像的起始位置。背景图像如果要重复，将从这一点开始。

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

如果您仅规定了一个关键词，那么第二个值将是"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属性的相关实例

CSS 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 参数，那么第一个设置水平间距，而第二个设置垂直间距。

值

描述

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的样式。

YF-SOD

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
background、border属性详解(background-attachment|size|position|clip、border-image|image-slice|outset等)

目录backgroundbackground-colorbackground-urlbackground-repeatbackground-attachmentbackground-positionbackground-originbackground-sizebackground-clipbackground-blend-modebackground属性的相关实例borderborder-widthborder-styleborder-col..
复制链接

扫一扫

专栏目录