INFO

基础的展示效果

图片倒影 火狐不支持

<template>
	<div class="container">
		<img
			src="https://file.wangzevw.com/images/default_top_img_3.webp"
			alt="image"
			srcset=""
		/>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* -webkit-box-reflect: 存在兼容问题,火狐暂不支持 */
	img {
		width: 300px;
		object-fit: cover;
		-webkit-box-reflect: below 1px
			linear-gradient(transparent, rgba(0, 0, 0, 0.5));
	}
}
</style>

图片倒影 火狐支持

<template>
	<div class="container">
		<div>
			<div class="box">
				<img
					src="https://file.wangzevw.com/images/default_top_img_3.webp"
					alt="image"
					srcset=""
				/>
			</div>

			<div style="overflow: hidden; height: 0">
				<div class="box" id="element">
					<img
						src="https://file.wangzevw.com/images/default_top_img_3.webp"
						alt="image"
						srcset=""
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	/* -moz-element(#element): 仅仅适用于火狐 */
	.box {
		position: relative;
		width: 300px;
		&::after {
			content: "";
			position: absolute;
			left: 0;
			top: 100%;
			width: 100%;
			height: 100%;
			transform: translateY(1px) rotateX(180deg);
			mask: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
			background: -moz-element(#element);
		}
		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}
</style>

图片阴影

<template>
	<div class="container">
		<img
			src="https://file.wangzevw.com/images/default_top_img_3.webp"
			alt="image"
			srcset=""
		/>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	img {
		width: 300px;
		object-fit: cover;
		border-radius: 10px;
		/*
    图片阴影:
    box-shadow: 如果使用box-shadow 效果差强人意(是给整个矩形图片加阴影, 可能会突出边角问题)
    drop-shadow: 会在图片周围加阴影
    */
		filter: drop-shadow(red 0px 0px 8px);
	}
}
</style>

磨砂效果

毛玻璃/磨砂(无效果)

毛玻璃/磨砂(blur)

毛玻璃/磨砂(backdrop-filter)

毛玻璃/磨砂(box-shadow + blur)

<template>
	<div class="container">
		<div class="box box_1">毛玻璃/磨砂(无效果)</div>
		<div class="box box_2">毛玻璃/磨砂(blur)</div>
		<div class="box box_3">毛玻璃/磨砂(backdrop-filter)</div>
		<div class="box box_4">毛玻璃/磨砂(box-shadow + blur)</div>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-image: url("https://file.wangzevw.com/images/default_top_img_3.webp");
	background-repeat: no-repeat;
	position: relative;
	padding: 14px;
	.box {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 为了看到效果，必须使元素的背景至少部分透明 */
		background: rgba(255, 255, 255, 0.7);
		width: 60%;
		height: 100px;
		margin-bottom: 10px;
		position: relative;
		overflow: hidden;
		color: #000;
	}
	.box_2 {
		/* 整体模糊, 并且文字不清晰 */
		filter: blur(6px);
	}
	.box_3 {
		backdrop-filter: blur(6px);
	}

	.box_4::before {
		content: "";
		width: 100%;
		height: 100%;
		background: inherit;
		position: absolute;
		right: 0;
		/* left: -25px;
		top: -25px; */
		bottom: 0;
		box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
		filter: blur(10px);
	}
}
</style>

不规则图片组合

<template>
	<div class="image5_box">
		<div class="box">
			<div class="box_1"></div>
			<div class="box_2"></div>
			<div class="box_3"></div>
			<div class="box_4"></div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.image5_box {
	position: relative;
	padding: 14px;
	.box {
		width: 300px;
		height: 300px;
		margin: 30px auto;
		background-color: #fff;
		position: relative;

		div {
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.box_1 {
			clip-path: polygon(0 0, 30% 0, 70% 30%, 70% 60%, 0 100%);
			background: url(https://file.wangzevw.com/images/default_top_img_1.webp);
			background-size: cover;
			background-position: 50% -40px;
			transform: scale(0.98);
			transform-origin: left top;
		}

		.box_2 {
			clip-path: polygon(30% 0, 100% 0, 100% 50%, 70% 30%);
			background: url(https://file.wangzevw.com/images/default_top_img_2.webp);
			background-size: cover;
			background-position: 20% -40px;
			transform: scale(0.98);
			transform-origin: top right;
		}

		.box_3 {
			clip-path: polygon(0 100%, 100% 100%, 70% 60%);
			background: url(https://file.wangzevw.com/images/default_top_img_4.jpeg);
			background-size: cover;
			background-position: 50% 200px;
			transform: scale(0.98);
			transform-origin: bottom left;
		}

		.box_4 {
			clip-path: polygon(70% 30%, 100% 50%, 100% 100%, 70% 60%);
			background: url(https://file.wangzevw.com/images/default_top_img_5.jpeg);
			background-size: cover;
			background-position: 8% 100px;
			transform: scale(0.98);
			transform-origin: bottom right;
		}
	}
}
</style>