记录：css绘制遮罩层、css超出显示省略号、修改placeholder样式

（一）CSS控制单行文字超出范围显示省略号

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

（二）elementUI 修改placeholder 样式

<el-input placeholder="请输入" style="width: 200px"></el-input>

/deep/.el-input__inner {
    &::placeholder {
      color: red;
      font-size: 16px;
    }
  }

（三）css绘制遮罩层

1. 父容器采用background设置底层图片

<div class="grid-content" 
:style="{'background': 'url('+item.src+')  no-repeat center center'}">
    <div class="grid-masklayer" >
      <div class="grid-masklayer-border"></div>
      <div class="grid-masklayer-img">
         <img :src="item.imgurl">
       </div>
       <div class="grid-masklayer-description">
          <span>{{item.description}}</span>
       </div>
    </div>
 </div>

2. 设置遮罩，使用伪类:after给父容器添加图层

.grid-content{
   height: 240px;
   position: relative;
 }

.grid-masklayer:after{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            background-color: #001529;
            opacity: 0.7;
            z-index: 1;
            width: 300px;
            height: 240px;
 }

3. 设置遮罩层上的图片和文字

.grid-masklayer{
            display: flex;
            flex-direction:column;
            align-items:center;
            height: 100%;
            .grid-masklayer-border{
              width: 30px;
              border: 1px solid #409efe;
              margin-top: 47px;
              z-index: 10;
            }
            .grid-masklayer-img{
              height: 45px;
              width: 51px;
              z-index: 10;
              text-align: center;
              margin-top: 40px;
            }
            .grid-masklayer-description{
              font-family: MicrosoftYaHei;
              font-size: 18px;
              font-weight: bold;
              font-stretch: normal;
              line-height: 36px;
              letter-spacing: 0px;
              color: #ffffff;
              z-index: 10;
            }
          }

实现的效果图为：