css毛玻璃效果

一个热爱前端的全栈小胖子

于 2024-10-15 15:43:51 发布

阅读量582

点赞数 5

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_70243424/article/details/142956246

css 专栏收录该内容

13 篇文章

订阅专栏

 <view flex justify-between>
  <view flex-1 class="housingResources-tabs" h72rpx mt44rpx :style="{ marginRight: index % 2 === 0 ? '30rpx' : '0' }" v-for="(item, index) in 2" :key="index"> </view>
</view>

.housingResources-tabs {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px); /* 毛玻璃模糊程度 */
  -webkit-backdrop-filter: blur(10px); /* 兼容 Safari */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}