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="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>