背景色. box
width:450px；
height:450px；
border :1 px固态Aqua；
背景色： burly wood；
/*默认情况下，背景颜色从内部边距可见*/
padding:20px；
/*控制背景覆盖范围*
背景剪辑：内容盒；
/*渐变/
背景：线性梯度(45度，红色，蓝色)；
背景：线性梯度(
托福，
RGBA(255、0、0、0.7 )、
白色、
黄色，
红色
)；
背景图像
. box {
width: 300px；
高： 300 px；
border : 1px固态Aqua；
背景色： burly wood；
/*默认情况下，背景颜色从内部边距可见*/
/* padding: 20px； */
/*控制背景覆盖范围*
背景剪辑：内容盒；
/*渐变/
背景：线性梯度(45度，红色，蓝色)；
背景：线性梯度(
托福，
RGBA(255、0、0、0.7 )、
白色、
黄色，
红色
)；
背景图像： URL (girl.jpg )；
/*图像不重复*
后台- repeat :否- repeat；
/*背景定位*
/*后台-附件：固定； */
/*背景图的位置*
/*背景定位336050 px0px； */
背景定位： 50 % 50 %；
/*背景尺寸： cover； */
/*阴影(/
box-shadow: 5px 10px 5px red；
/*圆角/
border-radius: 160px；
}
/* .box img {
box-shadow: 5px 10px 5px red；
() /
效果图表
使用向导映射
什么是向导地图？
CSS sprite直译为“CSS sprite”，有时一般解释为“CSS图像合并”或“CSS映射的排列”，是网页图像的应用处理方式。 其实是将多个小图像组合成一个图像，利用CSS的“background-image”、“background-repeat”、“background-position”进行背景定位，再进行背景定位
使用向导映射的优点：
1、减少图像字节
2、减少了网页的http请求，大大提高了页面性能
3、解决了网页设计师对图片命名的困扰。 为一组图像命名即可，无需为每个小元素命名，提高了网页制作效率。
4、改变样式方便，只需在一张或少数图片上修改图像的颜色或样式，就可以改变整个网页的样式。 维护变得容易。
阿里字体图标引用实战
2 .创建项目并添加icon
效果：
3 .步骤：
Unicode引用：
步骤1 :复制在项目下生成的@font-face
@font-face {
font-family :‘icon font’；
SRC:URL(iconfont.EOT )；
SRC:URL(iconfont.EOT？ # ie fix’)格式(嵌入式开放) )、
URL(iconfont.wofF2 ) (格式) wofF2 )、
URL(Iconfont.woff ) (格式) woff )、
URL(iconfont.TTF ) (格式) (truetype )、
URL(Iconfont.SVG#Iconfont ) )格式) SVG )；
}
定义使用步骤iconfont的样式
. iconfont {
字体- family :“icon font”！ 导入；
font-size: 16px；
字体样式： normal；
微信字体智能： antialiased；
- moz-OS x-font-smoothing : gray scale；
}
步骤3 :选择适当的图标，获取字体代码并将其应用于页面
3
字体类参考：
步骤1 :引入在项目下生成的fontclass代码：
步骤2 :选择适当的图标，获取类名并将其应用于页面：