2023.2.13 Day19

2023.2.13

盒子阴影

Box-shadow：h-shadow  v-shadow   blur    spread    color

x轴偏移量  y轴偏移量  模糊值  阴影大小  阴影颜色

h-shadow：阴影的水平偏移量，正数右，负数左，必须属性，单位px

v-shadow：阴影的垂直偏移量，正数下，负数上，必须属性，单位px

blur：阴影的模糊值，不能为负数，可选，单位px

spread：阴影大小；正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小） 0阴影大小和盒子大小相同

inset：内阴影

可以在一个元素上设置多个阴影，之间用逗号隔开

文字阴影

text-shadow：h-shadow  v-shadow   blur

x轴偏移量  y轴偏移量  模糊值

多背景：background-image:url（“图片路径”），url（“图片路径”）；

不同的背景用逗号隔开，并且还可以給不同的背景设置不同属性（背景起始位置、背景是否重复等）

书写顺序越靠前，显示越靠上

背景的尺寸

背景图的大小

取值：数值：宽、高 如果只设置一个值，第二值会被自动设为auto；

cover覆盖：等比例缩放背景图片铺满整个盒子，但是背景图片可能无法完整显示

百分比：按照盒子的大小进行百分比计算，宽，高 如果只设置一个值，第二个值会被自动设为auto

Contain：包含：等比例缩放背景图片到完整的盒子中，但是背景图在区域范围内不能铺满，取决于盒子和图片的比例不一致

背景图定位

Background-origin：padding-box；默认值，背景图相对于内填充区域来定位

content-box：背景图相对于内容进行定位

border-box：背景图相对于边框区域进行定位

背景颜色的绘制区域

Background-clip：content-box；背景裁剪到内容区域，仅内容区显示

Background-clip：padding-box；背景裁剪到内填充区域，在内容区和内填充区显示

Background-clip：border-box；背景裁剪到边框区域，在内容区、内填充区、边框区显示。默认值

线型渐变

Background：linear-gradient；（方向，颜色1，范围1，颜色2，范围2...）

方向：1、使用位置的关键字

to right 方向自左往右

to left 方向自右往左

to top 方向自下往上

to bottom 方向自上往下

to right bottom 方向从左上往右下

to left bottom 方向从右上往左下

to left top 方向从右下往左上

to right top 方向从左上往右下

2、度数

0deg 相当于 to top

90deg相当于 to right

重复性线型渐变

Background：repeating-linear-gradient（方向，颜色1，范围1，颜色2，范围2...）

径向渐变

Background：radial-gradient（渐变的形状，颜色1 范围1，颜色2 范围2...）；

渐变的形状：椭圆ellipse 默认值     圆circle

圆心位置：

Background：radial-gradient（渐变的形状 at 水平位置 垂直位置，颜色1 范围1，颜色2 范围2...）;

取值：关键字left right center top bottom center

Px 百分比

重复性径向渐变