<!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>