html伪元素::after、颜色渐变linear-gradient、文字超出一行、两行、三行、四行。。。则显示省略号、半透明边框hsla
<html>
<style>
body{
background: moccasin;
}
.btn-play-game{
width: 113px;
height: 54px;
margin-right: 24px;
position: relative;
background: transparent;
}
.btn-play-game::after{
color: #FFFFFF;
text-align: center;
content:'下载';
display: block;
font-size: 26px;
color: #FFFFFF;
text-align: center;
line-height: 54px;
width: 113px;
height: 54px;
background-image: linear-gradient(-179deg, rgba(255,73,94,1), rgba(255,48,111,1) 100%);
box-shadow: 0 6px 12px 0 rgba(255,39,110,0.20);
border-radius: 8px;
}
.oneline{
width: 200px;
height: 80px;
font-size: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.twoline{
width: 200px;
font-size: 30px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /*行数*/
-webkit-box-orient: vertical;
}
.threeline{
width: 200px;
font-size: 30px;
margin-top: 50px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /*行数*/
-webkit-box-orient: vertical;
}
.rgba,.hsla{
width: 200px;
font-size: 30px;
margin-top: 50px;
}
.rgba{
border:10px solid rgba(255,255,255,.2);
background:#fff;
background-clip:padding-box;
}
.hsla{
border:10px solid hsla(0,0%,100%,.2);
background:#fff;
background-clip:padding-box;
}
</style>
<body>
<div class="btn-play-game"></div>
<div class="oneline">我是一行我是一行我是一行</div>
<div class="twoline">我是两行1我是两行2我是两行3我是两行4</div>
<div class="threeline">我是三行1我是三行2我是三行3我是三行4我是三行1我是三行2我是三行3我是三行4</div>
<div class="rgba">实现半透明边框</div>
<div class="hsla">实现半透明边框</div>
</body>
</html>这是一些前端比较常用的小技巧，积累和分享一下