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