如何用CSS实现柱状图背景透明且保留彩色边框？

阿华AIGC实验室

2026-5-28

实现带彩色边框的透明背景柱状图

我来帮你搞定这个透明背景+彩色边框的柱状图需求！目前你遇到的问题是因为把背景色直接设置在了.progress-bar上，没有区分背景和边框，所以设置透明时整个元素都跟着变透明了。下面是调整后的代码和思路：

核心修改思路

要实现背景透明但边框有颜色，我们需要：

把.progress-bar的背景设为完全透明
单独给它添加彩色边框
用box-sizing: border-box确保边框不会额外占用宽度，避免布局错乱

修改后的HTML代码

<div class="col-md-4 progress skill-bar"> 
  <div class="progress-bar" role="progressbar" aria-valuenow='70' aria-valuemin="0" aria-valuemax="100"> 
    <span class="skill" id="content"></span> 
  </div> 
</div>

修改后的CSS代码

<style type="text/css"> 
.progress { 
  height: 100px; 
  margin-top: 400px;
  /* 如果需要外层容器也带边框，可以取消下面注释并自定义颜色 */
  /* border: 2px solid #ccc; */
  background-color: transparent;
} 

.progress .skill { 
  font: normal 12px "Open Sans Web"; 
  line-height: 35px; 
  padding: 0; 
  margin: 0 0 0 20px; 
  text-transform: uppercase; 
} 

.progress .skill .val { 
  float: right; 
  font-style: normal; 
  margin: 0 20px 0 0; 
} 

.progress-bar { 
  text-align: left; 
  transition-duration: 3s;
  background-color: transparent; /* 让柱状图背景完全透明 */
  border: 3px solid yellow; /* 这里设置你想要的边框颜色 */
  box-sizing: border-box; /* 让边框包含在元素宽度内，不破坏原有布局 */
} 
</style>