【CSS 技巧】实现半透明边框的正确方式 —— 使用 background-clip: padding-box
在日常前端开发中，我们经常希望元素的边框（border）半透明，同时又保持元素内部（背景）为不透明。
看似简单的需求，直接使用 rgba() 或 hsla() 透明度设置却常常导致背景也透出外部背景，影响视觉效果。
今天我们通过一个简洁的 Demo，教你如何正确实现「半透明边框 + 不透明背景」的效果。
🌈 一、效果预览
最终效果如下👇
（半透明边框，白色内容背景，不受外层背景图干扰）
🧱 二、完整 HTML + CSS 代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>半透明边框效果</title><style>body {background: url('http://csssecrets.io/images/stone-art.jpg');background-size: cover;}div {border: 10px solid hsla(0, 0%, 100%, .5); /* 半透明白色边框 */background: white; /* 不透明背景 */backg