CSS

2023-08-21 06:53| 来源: 网络整理| 查看: 265

需求：设置一个半透明的边框,其关键时使用background-clip属性，但是在真机预览时，小程序中边框不显示

使用 background-clip: padding-box;可实现。

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

.camera-icon { width: 140rpx; height: 140rpx; border-radius: 50%; border: 30rpx solid rgba(255, 255, 255, 0.35); background-color: rgba(255, 255, 255); background-clip: padding-box; } 问题：背景色和边框色一样时，小程序中边框显示不了

设置rgb不是白色

background-color: #fff; border: 30rpx solid rgba(223, 61, 61, 0.35); background-clip: padding-box;

设置都是rgb和color都是255, 0, 0（red）

border: 30rpx solid rgba(255, 0, 0, 0.35); background-color: rgb(255, 0, 0); background-clip: padding-box;

结论：两个色值不能一样解决：两个div //html //css .camera-icon { display: flex; justify-content: center; align-items: center; width: 200rpx; height: 200rpx; border-radius: 50%; background-color: rgba(255, 255, 255, 0.35); } .camera-icon-center { width: 140rpx; height: 140rpx; border-radius: 50%; background-color: #ffffff; }

效果图：

CSS小技巧---半透明边框

【本文地址】

CSS

CSS

今日新闻

推荐新闻