《css 揭秘》

by Fannie

HTML

<div>
  半透明边框
</div>
<div class='div1'>
  半透明边框
</div>
<div class='div2'>
  半透明边框
</div>

CSS

body {
	background: #000;
}

div {
  border : 10px  solid  rgba(255 , 255 , 255 , .5);
  background:white;
  background-clip: padding-box;	
  max-width: 20em;
  padding: 2em;
  margin: 2em auto 0;
}
.div1 {
  border : 10px  solid  rgba(255 , 255 , 255 , .5);
  background:white;
  background-clip: content-box;	
  max-width: 20em;
  padding: 2em;
  margin: 2em auto 0;
}
.div2 {
  border : 10px  solid  rgba(255 , 255 , 255 , .5);
  background:white;
  background-clip: border-box;	
  max-width: 20em;
  padding: 2em;
  margin: 2em auto 0;
}