一些css记录

background-blend-mode

定义了背景层的混合模式（图片与颜色）。菜鸟教程地址
例如：

filter 滤镜

background-clip 背景颜色出现位置，是否包含边框

border-box | padding-box | content-box 有点像盒子模型

border-image-source: url(border.png);用图像作为边框

border-image -width属性指定图像边界的宽度。

绘制箭头

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}

单行文本溢出时显示省略号

overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 375px;

多行文本溢出显示省略号

 overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  /* set n lines, including 1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

页面展示灰色

body{
  filter: grayscale(1);
}

删除 type="number" 末尾的箭头

.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

使用 caret-color 来修改光标的颜色

caret-color: #ffd476;

:not选择器

除了最后一个元素外，所有元素都需要一些样式，使用 not 选择器非常容易做到。

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

修改 input placeholder 样式

.placehoder-custom::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

日期选择器日期图标放在右侧

// 日期选择器日期图标放在右侧
.el-date-editor{
  .el-input__prefix {
    left: calc(100% - 26px);
  }
  .el-input__suffix{
    right: 20px;
  }
  .el-input__inner{
    padding-left: 12px;
  }
}

绘制一个下拉框的样式

.poper-box {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.06);
    width: 100%;
    position: relative;
    border: 1px solid #E8E8E8;
}

.poper-arrow {
    border-width: 16px;
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    margin-left: -16px;
    top: -16px;
    left: 100px;
    border-top-width: 0;
    border-bottom-color: #E8E8E8;
}

.poper-arrow::after {
    content: " ";
    border-width: 16px;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    top: 1px;
    margin-left: -16px;
    border-top-width: 0;
    border-bottom-color: #fff;
    transition: 0.1s all;
}