1. PxCook
PxCook (像素大厨) 是一款切图设计工具软件。支持PSD文件的文字、颜色、距离自动智能识别。
- 开发面板 (自动智能识别)
- 设计面板(手动测量尺寸和颜色)
2. CSS精灵
CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。
优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。
实现步骤：
- 创建盒子，盒子尺寸与小图尺寸相同。
- 设置盒子背景图为精灵图。
- 添加background-position属性，改变背景图位置。
1.使用PxCook测量小图片左上角坐标
2.取负数坐标为background-position属性值（向左上移动图片位置）
3. 字体图标
（1）字体图标：展示的是图标，本质是字体。
（2）作用：在网页中添加简单的、颜色单一的小图标。
（3）优点：
- 灵活性：灵活地修改样式，例如：尺寸、颜色等；
- 轻量级：体积小、渲染快、降低服务器请求次数；
- 兼容性：几乎兼容所有主流浏览器；
- 使用方便：先下载再使用。
（4）下载字体图标：iconfont-阿里巴巴矢量图标库
（5）使用字体图标：
- 引入字体样式表（iconfont.css）
- 标签使用字体图标类名
<html>
<head>
<title>字体图标</title>
<link rel="stylesheet" href="./iconfont.css"/>
<style>
.iconfont {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<span class="iconfont icon-test"></span>
</body>
</html>4. 垂直对齐方式
属性名：vertical-align
| 属性值 | 效果 |
| baseline | 基线对齐（默认） |
| top | 顶部对齐 |
| middle | 居中对齐 |
| bottom | 底部对齐 |
<html>
<head>
<title>垂直对齐方式</title>
<style>
div {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="./images/cat.jpg">小喵咪
</div>
</body>
</html>5. 过渡
作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性：transition（复合属性）
属性值：过渡的属性 花费时间（s）
注意：
- 过渡的属性可以是具体的CSS属性
- 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
- transition 设置给元素本身
<html>
<head>
<title>过渡</title>
<style>
img {
width: 100px;
height: 100px;
transition: all 1s;
}
img:hover {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div>
<img src="./images/cat.jpg">
</div>
</body>
</html>6. 透明度
作用：设置整个元素的透明度（包含背景和内容）
属性名：opacity
属性值：0-1
- 0，完全透明（元素不可见）
- 1，不透明
- 0-1之间小数，半透明
<html>
<head>
<title>透明度</title>
<style>
div {
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<img src="./images/cat.jpg">
</div>
</body>
</html>7. 光标类型
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
| 属性值 | 效果 |
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
<html>
<head>
<title>透明度</title>
<style>
div {
cursor: move;
}
</style>
</head>
<body>
<div>
<img src="./images/cat.jpg">
</div>
</body>
</html>
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » CSS高级技巧
发表评论 取消回复