background属性
1、background简写
// background: url(img/1.jpg) no-repeat left top;
2、多背景
每组属性间逗号隔开;
为避免背景将图像盖住,背景色通常定义在最后一组上;
{
background: url(img/1.jpg) no-repeat left top,
url(img/2.jpg) no-repeat right bottom pink;
}
3、background-size 设置背景图片大小
cover: 会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏;
contain:会自动调整缩放比例,保证图片始终完整显示在背景区域,则背景区可能出现空白;
4、background-origin
border-box:背景图片的摆放以border区域为参考;
padding-box:背景图片的摆放以padding区域为参考;
content-box:背景图片的摆放以content区域为参考;
5、background-clip
将背景和背景色粗暴的裁剪,通常和background-origin一起使用;
border-box: 背景延伸至边框外沿,但是被边框压着;
padding-box: 背景延伸至内边距外沿;
content-box:背景被裁剪至内容区(content box)外沿。
阴影
1、文字阴影
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
2、盒子阴影
box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内外阴影;
内外阴影:默认为外阴影,想改为内阴影,则添加inset;
{
box-shadow:2px 2px 3px 4px rgba( 0, 0, 0, 0.4),
5px 5px 4px rgba( 0, 0, 0,0.4) inset;
}
注:其中水平位置和垂直位置均为必选;多层阴影叠加依然用逗号隔开。