Q: How do I make a translucent border that shows the background of a parent element?

Answer: The background-clip property is used when it is critical

background-clipThe default is a border-box, which means that the element background will extend under the border. In this case, set the translucent border to display the background of the element itself and set it topadding-boxorcontent-boxAt this point, the background of the element itself will not extend under the border, and the translucent border will show the background of the parent element

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Translucent border</title>
  </head>
  <style>
    body {
      background-color: saddlebrown;
    }
    div {
      margin: 20px;
      height: 200px;
      border: 10px solid rgba(255.255.255.0.3);
      background-color: white;
      background-clip: padding-box;
    }
  </style>
  <body>
    <div>I have a translucent border</div>
  </body>
</html>
Copy the code