盒子阴影
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
圆心位置:ackground:radial-gradient(渐变形状 at 水平位置 垂直位置)
取值:关键字 left right center
top bottom center
px
百分比
重复径向渐变
语法:background:repeating-radial-gradient(渐变形状,圆心,颜色1 范围1;颜色2 范围2...);
径向渐变
重复径向渐变
语法:background:repeating-radial-gradient(渐变形状,圆心,颜色1 范围1;颜色2 范围2...);