装饰

装饰

垂直对齐方式

• 属性名：vertical-align
• 属性值：baseline 效果：默认，基线对齐
• 属性值：top，bottom 效果 顶部和底部对齐
• 属性值：middle 效果：中部对齐

---

光标类型

• 场景：设置鼠标光标在元素上显示的样式
• 属性名：cursor
• 常见属性值：

• • default 效果：默认值，通常是箭头
• • pointer 效果：小手效果，提示用户可以点击
• • text 效果： 工字型，提示用户可以选择文字
• • move 效果：十字光标，提示用户可以移动

---

边框圆角

• 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
• 属性名：border-radius
• 常见取值：数字+px，百分比
• 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

边框圆角的常见应用

• 画一个正圆：

• 1. 盒子必须是正方形
• 2. 设置边框圆角为盒子宽高的一半-- border-radius：50%

• 胶囊按钮：

• 1. 盒子要求是长方形
• 2. 设置 - border-radius： 盒子高度的一半

---

溢出部分显示效果

• 溢出部分：指的是盒子 内容部分 所超过盒子范围的区域
• 场景：控制内容溢出部分的显示效果，>如：显示，隐藏，滚动条……
• 属性名：overflow
• 常见属性值：
• visible 效果：默认值，溢出部分可见
• hidden 效果：溢出部分隐藏
• scroll 效果：无论是否溢出，都显示滚动条
• auto 效果：根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏

• 场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏
• 常见属性：

• 1. visibility：hidden
• 2. display：none

---

拓展

• 场景：让某元素整体(包括内容) 一起变透明
• 属性名：opacity
• 属性值：0~1之间的数字

• 1:表示完全不透明
• 2：表示完全透明

• 注意点：

• opacity会让元素整体透明，包括里面的内容，如：文字，子元素等......

---

精灵图的介绍

• 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
• 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
• 例如：需要在网页中展示8张小图片
• • 8张小图片分别发送 -

  精灵图的使用步骤

• 1. 创建一个盒子，设置盒子的尺寸和小图尺寸相同
• 2. 将精灵图设置为盒子的背景图片
• 3. 修改背景图位置
• • 通过pxcook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

---