边框的形状
border主要是用来给盒子增加边框的，但是在开发中也可以利用边框的特性实现一些形状
由以下代码可知border的四个方向的边框是四等分的
.box {
width: 100px;
height: 100px;
background-color: red;
border: 30px solid orange;
border-right-color: blue;
border-left-color: green;
border-top-color: yellow;
border-bottom-color: blueviolet;
box-sizing: border-box;/*将边框作为盒子的一部分*/
}
增大border，可将内部全覆盖
.box {
width: 100px;
height: 100px;
background-color: red;
border: 50px solid orange;
border-right-color: blue;
border-left-color: green;
border-top-color: yellow;
border-bottom-color: blueviolet;
box-sizing: border-box;/*将边框作为盒子的一部分*/
}
再将其余三个边框以及内部的的颜色改为透明就可得到一个三角形
.box {
width: 100px;
height: 100px;
background-color: transparent;
border: 50px solid orange;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: yellow;
border-bottom-color: transparent;
box-sizing: border-box;/*将边框作为盒子的一部分*/
}
Web网络字体
Web fonts工作原理：
下载字体文件，在CSS代码中使用，部署时将字体文件也部署到服务器中，用户浏览网页时字体文件也就会一起下载下来
使用过程：
- 下载字体文件
- 将字体文件放到对应目录中
- 通过@font-face来引入字体，并且设置格式
- 使用字体
@font-face {
font-family: "dl";
src: url("../fonts/DaLiangZiTiKu-1.ttf");
}
.box {
font-family: "dl";
}
字体文件种类：ttf、otf、eot、svg、svgz
web fonts的兼容性写法
@font-face {
font-family: "dl";
src: url("../fonts/DaLiangZiTiKu-1.ttf");
src: url("../fonts/DaLiangZiTiKu-1.woff") format("woff"),
url("../fonts/DaLiangZiTiKu-1.svg") format("svg"),
}
url指定资源路径
format用于帮助浏览器快速识别字体的格式
字体图标
使用：
登录阿里icons
下载代码，并拷贝到项目中
精灵图
一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应图片的部分
- 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
- 减小图片总大小
- 解决图片命名困扰
精灵图：
精灵图制作：
- 设计人员
- https://www.topal.com
使用流程
<style>
i.hot-icon {
background-image: url("../images/111.png");
background-repeat: no-repeat;
background-position: -192px 0;
display: inline-block;
height: 13px;
width: 26px;
}
</style>
</head>
<body>
<i class="hot-icon"></i>
</body>
- 取一整张图作为背景，注意no-repeat
- 通过background-position确定要使用的图标在整张图的什么位置，具体数值由设计人员给出
- 设置元素的宽高与小图标的一致
522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
