1. 文字侧边阴影效果
使用CSS的text-shadow属性可以给文字添加阴影效果，但是如果想要实现文字的侧边阴影效果该怎么办呢？可以使用background-clip和-webkit-text-fill-color属性来实现。
使用方法
首先，给文字添加-webkit-text-fill-color属性，将文字填充颜色改为透明：
.shadow-text {
-webkit-text-fill-color: transparent;
}
然后使用background-clip将背景限制在文字上方（也就是文字的侧边）：
.shadow-text {
-webkit-text-fill-color: transparent;
background-clip: text;
background-image: linear-gradient(to right, #f00, #00f);
}
这里使用了一个渐变背景色实现文字的侧边阴影效果，你可以根据需要改变背景颜色和渐变方向来实现不同的效果。
2. 盒模型的快捷方式
CSS的盒模型是网页布局中很重要的一个概念，但是为了设置元素的内边距和边框，需要写很多重复的代码。
使用方法
使用box-sizing属性可以让元素的盒模型属性统一，不再需要单独设置内边距和边框。
/* 统一盒模型 */
* {
box-sizing: border-box;
}
/* 不统一盒模型 */
* {
box-sizing: content-box;
}
这样就可以通过设置元素的width和height属性来确定元素的实际宽度和高度，而元素的内边距和边框不会改变元素的大小，从而减少了重复的代码。
3. 半透明边框效果
CSS的border属性可以设置元素的边框样式，但是默认情况下边框是不透明的。如果需要实现半透明的边框效果，可以使用box-shadow属性来实现。
使用方法
设置元素的box-shadow属性，将第三个参数设置为边框的大小，然后将border属性的颜色设为透明，就可以实现半透明的边框效果。
.transparent-border {
border: 5px solid transparent;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
}
4. 自适应正方形
有时候我们需要设置一个元素的宽度和高度相等，从而实现正方形的效果，但是往往需要知道元素的具体尺寸。如果想要实现一个自适应正方形，就需要用到CSS的百分比单位。
使用方法
将元素的宽度设置为50%，然后设置padding-top或padding-bottom为50%，就可以实现一个自适应正方形。
.square {
width: 50%;
padding-top: 50%;
}
5. 垂直居中
CSS的布局中，垂直居中通常是一个比较困难的问题，需要使用复杂的技巧才能实现。但是在某些情况下，可以使用简单的方法实现垂直居中。
使用方法
先将display属性设置为table-cell，然后设置vertical-align属性为middle，就可以将元素垂直居中。
.container {
display: table-cell;
vertical-align: middle;
}
注意，这种方法只能在元素的内容高度小于父元素高度时有效。如果元素的内容高度大于或等于父元素高度，就需要使用其他的方法实现垂直居中。
6. 多行文本溢出省略号
在某些情况下，需要将多行文本限制在一定的区域内，并且如果文本长度超过限制，还需要显示省略号。CSS的text-overflow属性可以实现单行文本的省略号效果，但是默认情况下对于多行文本无法实现省略号效果。
使用方法
设置元素的display属性为-webkit-box，同时设置-webkit-box-orient和-webkit-line-clamp属性，前者表示元素内部的子元素排列方向是垂直方向，后者表示元素内部最多显示的行数，然后再设置text-overflow属性即可实现多行文本的省略号效果。
.text-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* 最多显示3行文本 */
overflow: hidden;
text-overflow: ellipsis;
}
7. 双背景色
CSS的linear-gradient属性可以实现渐变背景色，但是只能设置单一的渐变。如果想要实现双背景色的效果，可以使用background-image属性和linear-gradient属性的组合来实现。
使用方法
设置元素的background-image属性为两个渐变背景色的组合，其中第一个背景色的渐变方向是水平方向，第二个背景色的渐变方向是垂直方向，从而实现双背景色的效果。
.double-background {
background-image: linear-gradient(to right, #f00, #f00),
linear-gradient(to bottom, #00f, #00f);
background-size: 100% 50%, 50% 100%;
background-position: top left, top right;
background-repeat: no-repeat;
}
8. 多行列表
在网页中，经常需要使用列表对信息进行排列展示，但是默认情况下列表只能显示为单行的横向排列，如果想要实现多行的纵向排列需要使用比较麻烦的布局方法。
使用方法
将列表项设置为display: inline-block;，然后将white-space属性设置为nowrap，同时设置父元素的宽度，当宽度不足以容纳所有列表项时，就会自动换行显示多行列表。
ul {
width: 300px;
white-space: nowrap;
}
li {
display: inline-block;
}
9. 获取第一个和最后一个子元素
CSS的:first-child和:last-child选择器可以选中元素的第一个和最后一个子元素，但是这两个选择器无法单独使用，如果想要获取除第一个或最后一个子元素之外的其他子元素，就需要使用其他的选择器，比如:nth-child(n+2)。
使用方法
使用:not(:first-child)选择器可以选中除第一个子元素之外的其他子元素，使用:not(:last-child)选择器可以选中除最后一个子元素之外的其他子元素，从而实现获取第一个和最后一个子元素之外的其他子元素。
/* 选中第一个子元素之外的其他子元素 */
li:not(:first-child) {
color: red;
}
/* 选中最后一个子元素之外的其他子元素 */
li:not(:last-child) {
color: blue;
}
10. 禁止文本选中和拖拽
在某些情况下，需要禁止网页中的文本被选中和拖拽，比如图片、按钮等元素。
使用方法
使用user-select属性可以禁止文本被选中，使用draggable属性可以禁止元素被拖拽。
/* 禁止文本被选中 */
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 禁止元素被拖拽 */
.no-drag {
-webkit-user-drag: none;
-moz-user-drag: none;
-ms-user-drag: none;
user-drag: none;
}
总结
本文介绍了10个实用的CSS小技巧，包括文字侧边阴影效果、盒模型的快捷方式、半透明边框效果、自适应正方形、垂直居中、多行文本溢出省略号、双背景色、多行列表、获取第一个和最后一个子元素以及禁止文本选中和拖拽。