在线可视化设计教你玩转圆角、阴影

你还在为不会写圆角阴影效果吗，DIYGW可视化设计器无需要编写任何一行代码，在线轻松设计导出圆角、阴影代码，无需编写任何一行代码，轻松导出代码。https://www.diygw.com

更多设计前往：DIYGW可视化设计器 DIY官网专注做拖拽式可视化微信小程序、Bootstrap、单页动画、Html5 WebApp设计工具

<template>
	<view class="container">
		<image mode="widthFix" class="response diygw-col-24 image-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image1-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image2-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image3-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image4-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image5-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image6-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image7-clz" src="/static/pic1.jpg"></image>
		<image mode="widthFix" class="response diygw-col-12 image8-clz" src="/static/pic1.jpg"></image>
		<view class="clearfix"></view>
	</view>
</template>

<script>
	//create by: 邓志锋 <280160522@qq.com> <http://www.diygw.com>
	export default {
		data() {
			return {};
		},
		onShareAppMessage: function () {},
		onLoad(option) {
			if (option) {
				this.setData({
					globalOption: option
				});
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {}
		}
	};
</script>

<style lang="scss">
	.image-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		overflow: hidden;
		width: calc(100% - 5px - 5px) !important;
		border-top-left-radius: 58px;
		margin-top: 5px;
		border-top-right-radius: 48px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image1-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 58px;
		margin-top: 5px;
		border-top-right-radius: 48px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image2-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 15px;
		margin-top: 5px;
		border-top-right-radius: 48px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image3-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 0px;
		margin-top: 5px;
		border-top-right-radius: 22px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image4-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 0px;
		margin-top: 5px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 36px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image5-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		box-shadow: 0px 8px 8px rgba(252, 24, 24, 0.16);
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 0px;
		margin-top: 5px;
		border-top-right-radius: 22px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image6-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		box-shadow: 0px 8px 8px 1px rgba(53, 166, 5, 0.16);
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 0px;
		margin-top: 5px;
		border-top-right-radius: 22px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image7-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		box-shadow: 2px 2px 8px 3px rgba(53, 166, 5, 0.33);
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 0px;
		margin-top: 5px;
		border-top-right-radius: 22px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.image8-clz {
		margin-left: 5px;
		border-bottom-left-radius: 21px;
		box-shadow: 2px 2px 8px 3px rgba(53, 166, 5, 0.33), 8px 7px 3px rgba(31, 31, 31, 0.16);
		overflow: hidden;
		width: calc(50% - 5px - 5px) !important;
		border-top-left-radius: 0px;
		margin-top: 5px;
		border-top-right-radius: 22px;
		border-bottom-right-radius: 16px;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.container {
		padding-bottom: 60px;
	}
</style>