一、Div

背景颜色设置为透明：

  1. background:transparent;

设置隐藏的Div和图片：

display:none; 隐藏结构不占地
visibility:hidden; 隐藏结构占地

背景图片铺满整个屏幕:

background:url("")no-repeat center;
background-size:cover;
background-attachmen:fixed;

背景颜色半透明：文字不透明

background-color:rgba(250,250,250,0.2);
opacity:0.1~1； 图片透明度
position:fixed; 固定定位

div里面img图片只显示中部

<div class="wrap-top">
      <img class="pic" :src="data.images.small" />
</div>

.pic {
    width: 100%;
  position: absolute;
  left: 0;
  top: -90%;
}
.wrap-top{
    height: 200px;
    overflow:hidden;
    position:relative;
}

二、文字

文字溢出处理

  • 单行文本

    display: inline-block; //将a标签转换成内联块
  max-width: 100%; //最大宽度范围
  font-size: 14px;
  text-overflow: ellipsis;  //将范围内最后一个文字文字转换为...
  white-space: nowrap; //超出范围文字隐藏
  color: #1d1d1d;
  overflow: hidden;  //溢出隐藏

  • 多行文本

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

首行缩进两字符

text-indent:2em;

三、设置span标签文字对齐方向

text-align:right/left/center;

四、设置圈内阴影

image.png

box-shadow: inset 0 -5rpx 50rpx rgba(255, 251, 251, 0.2);