css3 文本超出处理和添加阴影效果

效果如下：

代码修改阴影如下：

.carousel {
		margin-top: -20upx;
		width: 100%;
		height: 320upx;
		box-shadow: 0px 20px 20px -20px #5E5E5E; // 主要
		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

文本超出显示三个点一般分两种情况

一, 单行文本超出隐藏　　　

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

二, 多行文本超出隐藏　

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; //行数需设置
line-clamp: 3;
-webkit-box-orient: vertical;

注意：单行设置宽 多行设置宽高不然不会生效。