CSS奇技淫巧

CSS奇技淫巧

1.border图形

最主要的作用是增加边框，但也可以用来实现图形

width:100px;
height:100px;
border:50px solid orange;
border-right-color:blue;
border-bottom-color:aque;
border-left-color:red;
box-sizing:border-box;

这样就形成了特殊的形状

更多的border实现图片见：https://css-tricks.com/the-shapes-of-css/#top-of-site

2.web字体

在操作系统中的web-safe可选字体是有限的，不能定制化。
在样式表中

@font-face{
	font-family:'font'.
	url(xxx.ttf)
}
body{
	font-family:'font';
}

进行自体定制

3.字体图标

图标也可以是一种字体当成文字使用，这样可以减少图片图标的占用空间。
图标库 https://www.iconfont.cn/ 下载图标对应字体文件iconfont.ttf和iconfont.css
使用方式：

• 代码方式 直接输入字体图标的代码
• 伪元素 在元素的伪类的content中添加图标，从而在css中使用图标
• iconfont配置的css 直接添加到类中使用

4.精灵图

CSS Sprite是一种CSS图形合成技术，将各种小图片合并到一张图片，然后利用背景定位来显示对应的小图片。

• 可以减少网页的http请求量，加快网页响应速度
• 减少图片总大小
• 解决图片命名困扰

合成精灵图方法：https://www.toptal.com/developers/css/sprite-generator
获取精灵图的位置： http://www.spritecow.com/
background-image和background-position进行使用