css弹性布局指定显示行数多余文字去掉用省略号代替以及弹性布局中css 卡片阴影效果 

html：

<div class="goods-details-content">你如安好,便是晴天你如安好,异国他乡</div>

css:
.goods-details-content {
  display: flex;
  color: #4d4d4d;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; //显示几行

}

2 阴影效果

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div class="box case-content"> 
            <h1>卡片阴影效果</h1>
        </div>
    </body>
</html>

　　

.box {
　　display:flex;          
    width: 70%;
    height: 200px;
    margin: 50px auto;
    background-color: #fff;
}
.box h1 {
      font-size: 20px;
      line-height: 200px;
      text-align: center;
 }
.case-content {
 -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
 box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset; 
 -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
 
}

 

　　3 在一轮播图中 漂浮按钮

<div style="width:100%;position: relative;">
        <div>
          <el-carousel indicator-position="outside" :interval="10000">
              <el-carousel-item v-for="item in 2" :key="item">
                <img src="@/assets/images/home/web-banner1.png" alt="" width="100%" height="100%" />
              </el-carousel-item>
            </el-carousel>
        </div>

        <div style="position: absolute;top:50%;left: 90%;transform: translate(-50%,-50%);z-index:2">
          <el-button type="primary" @click="loginUp">微信登录</el-button>
        </div>
        
      </div>

 

posted @ 2021-04-23 13:08  Samuel-Leung  阅读(203)  评论(0)  编辑  收藏  举报