h5c3内容04
边框圆角、背景尺寸、背景原点、背景裁剪、线性渐变、径向渐变、2d转换
边框圆角border-radius
border-radius:上左 上右 下右 下左
border-top-left-radius:水平半径 垂直半径;
box-shadow:inset(内阴影)
背景尺寸
background-color颜色
background-image图片
background-position定位
background-repeat平铺
background-attachment固定
背景尺寸
background-size:水平 垂直(可使用百分比)
值cover:保证背景图片始终等比例最大化铺满
值contain:保证背景图片始终等比例完整显示
背景原点
background-origin:设置背景图片从哪个盒子开始平铺
background-origin:padding-box默认从padding-box开始
background-origin:border-box
background-origin:content-box
背景裁剪
background-clip:padding-box
background-clip:border-box
background-clip:content-box
渐变
线性渐变
background-image:linear-gradient(方向,起始颜色,结束颜色)
方向取值:to left right bottom top 45deg(角度)
径向渐变
background-image:radial-gradient(辐射半径,中心位置,起始颜色,结束颜色)
方向取值:at(前后可跟具体数值) left center right bottom top
例:
radial-gradient(at center,yellow,green);
radial-gradient(75px 120px at center, yellow,green);
2D转换transform
1) 缩放 scale (x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值,不可用百分比
2)移动 translate(x, y) 可以改变元素的位置，x、y可为负值，可用百分比
x 在水平方向移动。
y 在垂直方向移动。
transform：translate(-50%)向左走自身的一半。
3)旋转 rotate(30deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
4)倾斜skew(30deg,30deg)
x沿着水平方向倾斜
y沿着水平方向倾斜