CSS3: 设计一个半透明边框

<style>
  main{
    width: 100%;
    padding: 60px 80px 80px;
    background: #b4a078;
  }
  div{
    padding: 12px;
    margin: 20px auto;
    background: white;
    border: 10px solid hsla(0, 0%, 100%, .5);
    //border: 10px solid rgba(0,0,0,0.5)
  }
  label{
    color: #f4f0ea;
  }
  input[id="pb"]:checked ~ div{
    background-clip: padding-box;
  }
  //当然你可以试试 content-box 和 border-box 的情况,需要每次刷新页面查看情况
style>
<template>
  <main>
    <input id="pb" type="checkbox" checked/>
    <label for="pb">padding-box(默认)label>
    <div>ri so so xi do xi la so la xi xi xi xi la xi la .div>
  main>
template>
复制代码