本文详细介绍了CSS的高级技巧，包括：1) 改变用户界面样式，如鼠标样式、轮廓、文本域拖拽和垂直对齐；2) 如何处理文字溢出，利用word-break、white-space和text-overflow属性；3) CSS精灵技术的原理和使用方法，提高网页加载速度；4) 字体图标的优势及其在网页设计中的应用；5) 解析CSS滑动门技术，用于创建自适应背景形状的元素；6) before和after伪元素的用法，用于添加内容和样式。
1. css用户界面样式
所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。
鼠标样式(cursor)
鼠标样式使用cursor属性设置，设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
常用属性值：
cursor : default 小白 | pointer 小手 | move 移动 | text 文本
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
</ul>
轮廓样式(outline)
轮廓是绘制于元素周围的一条线，位于边框边缘border的外围，可起到突出元素的作用。
outline : outline-color ||outline-style || outline-width
平常基本不设置轮廓线，一般都是去掉轮廓线的，写法为：outline: 0;或者outline: none;
示例如下：
<style>
form {
margin: 100px 100px;
}
input {
outline: none;
}
</style>
文本域拖拽(resize)
在 CSS3，resize 属性规定是否可由用户调整元素尺寸。
之前学习表单时，文本域默认在右下角是可以进行拖拽更改大小的。实际工作中，我们一般会禁止文本域拖拽，避免影响页面布局。
设置文本域不能拖如下：
<textarea style="resize: none;">
</textarea>
垂直对齐(vertical-align)
之前我们讲过水平居中对齐，如文字水平居中：text-align: center; 盒子内文字垂直居中：line-height等于盒子height即可。
有宽度盒子水平居中：设置margin左右为auto即可。
绝对定位盒子水平垂直居中：先走父元素尺寸的一半，再走外边距为自己尺寸的一半（负值）即可（margin对绝对定位盒子无效）。
垂直居中设置或检索对象内容的垂直对其方式，语法格式如下：
vertical-align : baseline |top |middle |bottom
vertical-align 不影响块级元素中的内容对齐（对块级元素无效）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.first {
width: 400px;
height: 50px;
border: 1px solid red;
margin: 100px auto;
/*垂直对齐对块级元素无效*/
最低0.47元/天 解锁文章
995
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
