本文收集在开发中常用的一些 CSS 技巧，会不定期更新内容。

渐变色

MDN 文档：developer.mozilla.org/zh-CN/docs/…

渐变分为线性渐变、径向渐变 和 圆锥渐变 。这里主要讲最常用的线性渐变，在使用线性渐变的时候，使用角度以及百分比去控制渐变，会更加的灵活。

background: linear-gradient(to left, #ea8814 0%, #f9661e 40%);

background: linear-gradient(90deg, #ea8814 0%, #f9661e 40%);

效果：

#ea8814 这个颜色从左边开始，到 40%的位置时，颜色变成 #f9661e ，再往右边去，由于没有第三个颜色，所以再往右的区域显示的都是 #f9661e，而在左边 40% 的区域内，颜色是从 #ea8814 渐变到 #f9661e。

注意：使用角度时，0 度的方向，是从圆心到12点钟方向的，角度为正数时，按顺时针转动，角度为负数时，按逆时针转动。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度和 90 度。

如果不写百分比，会根据颜色的个数平均分配，例如写了5个颜色，那么这4个颜色对应的百分比（即颜色的位置）分别为 0%，25%，50%，75%，100%。

渐变色 border

参考：BorderImage——给 div 加一个不一样的 border

calc() 函数

在讲calc之前先说一下 vh、vw：

vw 相对于视口的宽度。视口被均分为100单位的vw
vh 相对于视口的高度。视口被均分为100单位的vh
vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

calc 是 css3提供的一个在css文件中计算值的函数,用于动态计算长度值。

任何长度值都可以使用calc()函数进行计算，你可以在一个表达式中混用不同单位；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
需要注意的是，+ 和 - 运算符的两边必须要有空白字符，例如：width: calc(100% - 10px)；，* 和 / 这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符；
calc() 函数支持嵌套，在函数内直接用括号就好了，例如：calc( calc( 100px / 2) / 2)。

阴影

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

阴影的大小以当前元素的大小为基础。

模糊半径表示模糊效果的宽度，以没有模糊效果时阴影的边缘为准，当设置模糊半径为10px时，模糊效果是向内5px，向外5px；

模糊半径10px 效果：

模糊半径50px 效果：

利用阴影做镂空效果

利用阴影做出镂空效果，使用一个 div ，设置大小为镂空区域的大小，背景为透明，然后设置其阴影，模糊半径为0，扩展半径为5000px，这样就能达到镂空的效果。

.loukong {
  width: 100px;
  height: 100px;
  background: transparent;
  border-radius: 20px;

  position: fixed;
  top: 50%;
  left: 50%;

  box-shadow: 0 0 0 5000px rgba(51, 51, 51, 0.3);
}

效果：

CSS 禁止点击事件

鼠标不可点击主要是两种表现：

1、鼠标不可点击时的显示状态

cursor: not-allowed

2、禁止触发点击事件

pointer-events:none

文字省略

文字溢出时显示省略号

文字单行溢出:

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多选文字溢出：

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

CSS 画三角形

原理很简单，当我们给一个 div 设置 border 的时候，每两个方向的 border 相交的地方，各自方向上占一半，如下：

.box {
  margin-left: 100px;
  width: 200px;
  height: 200px;
  border-width: 50px;
  border-style: solid;
  border-top-color: red;
  border-right-color: greenyellow;
  border-bottom-color: blue;
  border-left-color: blueviolet;
}

效果：

当 box 的大小为0时，就成了这样：

这个时候，如果不设置 border-bottom，再把左右两边的 border 颜色设置为透明，就只剩下一个顶部的 border，呈现的效果就是一个红色向下的箭头：

常用 CSS 技巧

渐变色