1.背景色
background-color: red; /*设置背景色为红色*/
2.背景图片
background-image: url('../img/1.jpg'); /*设置背景图片(默认平铺)*/ background-repeat: no-repeat; /*不平铺*/ background-repeat: repeat-x; /*横向平铺*/ background-repeat: repeat-y; /*纵向平铺*/ background-position: 20px 100px; /*设置背景图片位置X轴20px,Y轴100px*/ background-position-x: 30px; /*单独设置x轴位置*/ background-position-y: 30px; /*单独设置y轴位置*/
3.背景定位
关键字:
background-position: top left; /*背景图片设置在左上方*/ background-position: top center; /*顶部中间*/ background-position: center right; /*右边中间*/ background-position: center center; /*中心位置*/
百分比:
background-position: 50% 50%; /*中心位置*/ background-position: 100% 100%; /*右下角*/
4.设置背景图片大小
background-size: 320px 460px; /*设置背景图片宽度320像素,长度460像素*/
5.背景圆角
border-radius: 15px; /*圆角半径为15像素*/
border-top-left-radius: 15px;
/*只设置左上角圆角半径15像素*/
border-top-left-radius: 15px 30px;
/*左上角,圆角半径水平方向15像素,垂直方向30像素*/
border-radius: 50%;
/*设置宽高的一半 50% 则为圆*/
6.阴影
box-shadow: 20px 20px 50px blue; /*第一个值是阴影水平方向上的变异度,第一个值是垂直方向上的偏移,第三个值是阴影的模糊度,第四个值是阴影颜色*/
box-shadow: 20px 20px 50px blue inset;
/*inset:表示阴影内射*/