大家好，又见面了，我是你们的朋友全栈君。
背景色.box{
width:450px;
height:450px;
border:1pxsolid aqua;
background-color:burlywood;
/* 背景色默认可以从内边距透出来 */
padding:20px;
/* 控制背景的覆盖范围 */
background-clip:content-box;
/* 渐变 */
background:linear-gradient(45deg,red,blue);
background:linear-gradient(
to left,
rgba(255,0,0,0.7),
white,
yellow,
red
);
背景图片
.box {
width: 300px;
height: 300px;
border: 1px solid aqua;
background-color: burlywood;
/* 背景色默认可以从内边距透出来 */
/* padding: 20px; */
/* 控制背景的覆盖范围 */
background-clip: content-box;
/* 渐变 */
background: linear-gradient(45deg, red, blue);
background: linear-gradient(
to left,
rgba(255, 0, 0, 0.7),
white,
yellow,
red
);
background-image: url(“girl.jpg”);
/* 图片不重复 */
background-repeat: no-repeat;
/* 背景定位 */
/* background-attachment: fixed; */
/* 背景图位置 */
/* background-position: 50px 0px; */
background-position: 50% 50%;
/* background-size: cover; */
/* 阴影 */
box-shadow: 5px 10px 5px red;
/* 圆角 */
border-radius: 160px;
}
/* .box img {
box-shadow: 5px 10px 5px red;
} */
效果图
精灵图的使用
什么是精灵图？
CSS Sprite直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”或“CSS贴图定位”，是一种网页图片应用处理方式。其实就是把多张小图片整合到一张图片中去，再利用CSS的“background-image”，“background-repeat”，“background-position”进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。
使用精灵图的优点：
1、减少图片的字节；
2、减少了网页的http请求，从而大大的提高了页面的性能；
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率；
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
阿里字体图标引用实战
2.创建项目并添加icon
效果：
3.步骤：
Unicode 引用：
第一步：拷贝项目下面生成的 @font-face
@font-face {
font-family: ‘iconfont’;
src: url(‘iconfont.eot’);
src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘iconfont.woff2’) format(‘woff2’),
url(‘iconfont.woff’) format(‘woff’),
url(‘iconfont.ttf’) format(‘truetype’),
url(‘iconfont.svg#iconfont’) format(‘svg’);
}
第二步：定义使用 iconfont 的样式
.iconfont {
font-family: “iconfont” !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
3
font-class 引用:
第一步：引入项目下面生成的 fontclass 代码：
第二步：挑选相应图标并获取类名，应用于页面：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/143103.html原文链接：https://javaforall.net
