<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>透明边框</title>
<style>
body {
background: url(‘http://csssecrets.io/images/stone-art.jpg‘);
}
div {
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;
/* styling */
max-width: 20em;
padding: 2em;
margin: 2em auto 0;
font: 100%/1.5 sans-serif;
}
</style>
</head>
<body>
<div>
CSS 中的半透明颜色，比如 rgba() 和 hsla()。
<br>
<br>
background-clip的默认值为border-box，也就是说，背景色会填充到容器边框以及边框以内的地方，所以我们只需要将其修改为padding-box（让背景色在容器的内边距以及内边距以内填充）就可以实现所需要的效果了.
<br>
<br>
border-color上能运用rgba()、hsla()设置边框为半透明或完全透明，如果元素设置了背景颜色或背景图片的时候，会直接影响边框的透明颜色效果。特别是，要看到边框底下的内容时。造成这个现象是由于背景图片会延伸到边框底部。要解决这一问题，可以通过CSS3的background-clip来修正。
</div>
</body>
</html>
时间： 2024-12-24 05:28:18