如何增大进度条中方形/圆形块尺寸？宽高修改无效

我明白你的困扰——你已经把圆形改成了方形，但调整width/height没反应对吧？这是因为你的代码里**媒体查询（@media all and (min-width: 800px)）**里的样式覆盖了基础设置。当屏幕宽度≥800px时，媒体查询里的尺寸属性优先级更高，所以你改基础样式里的width/height根本不会生效。

下面是调整后的完整代码，我已经帮你把方块改成了大尺寸的方形，同时保证了在不同屏幕尺寸下都能正常显示：

@-webkit-keyframes myanimation { from { left: 0%; } to { left: 100%; } }
h1 { text-align: center; font-family: 'PT Sans Caption', sans-serif; font-weight: 400; font-size: 20px; padding: 20px 0; color: #777; }
.checkout-wrap { color: #444; font-family: 'PT Sans Caption', sans-serif; margin: 40px auto; max-width: 1200px; position: relative; }
ul.checkout-bar li { color: #ccc; display: block; font-size: 16px; font-weight: 600; padding: 14px 20px 14px 80px; position: relative; }
/* 基础样式：把圆形改成方形，调整基础尺寸 */
ul.checkout-bar li:before { 
  -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
  box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
  background: #ddd; 
  border: 2px solid #FFF; 
  border-radius: 0; /* 去掉圆角，变成方形 */
  color: #fff; 
  font-size: 16px; 
  font-weight: 700; 
  left: 20px; 
  line-height: 45px; /* 配合高度调整，让文字垂直居中 */
  height: 45px; /* 增大高度 */
  position: absolute; 
  text-align: center; 
  text-shadow: 1px 1px rgba(0, 0, 0, 0.2); 
  top: 4px; 
  width: 45px; /* 增大宽度 */
  z-index: 999; 
}
ul.checkout-bar li.active { color: #8bc53f; font-weight: bold; }
ul.checkout-bar li.active:before { background: #8bc53f; z-index: 99999; }
ul.checkout-bar li.visited { background: #ECECEC; color: #57aed1; z-index: 99999; }
ul.checkout-bar li.visited:before { background: #57aed1; z-index: 99999; }
ul.checkout-bar li:nth-child(1):before { content: "1"; }
ul.checkout-bar li:nth-child(2):before { content: "2"; }
ul.checkout-bar li:nth-child(3):before { content: "3"; }
ul.checkout-bar li:nth-child(4):before { content: "4"; }
ul.checkout-bar li:nth-child(5):before { content: "5"; }
ul.checkout-bar li:nth-child(6):before { content: "6"; }
ul.checkout-bar a { color: #57aed1; font-size: 16px; font-weight: 600; text-decoration: none; }

@media all and (min-width: 800px) { 
  .checkout-bar li.active:after { 
    -webkit-animation: myanimation 3s 0; 
    background-size: 35px 35px; 
    background-color: #8bc53f; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    content: ""; 
    height: 20px; /* 调整进度条高度，和方块更协调 */
    width: 100%; 
    left: 50%; 
    position: absolute; 
    top: -60px; /* 调整位置，配合方块高度 */
    z-index: 0; 
  } 
  .checkout-wrap { margin: 100px auto; } 
  ul.checkout-bar { 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    background-size: 35px 35px; 
    background-color: #EcEcEc; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); 
    border-radius: 10px; 
    height: 20px; /* 同步调整进度条高度 */
    margin: 0 auto; 
    padding: 0; 
    position: absolute; 
    width: 100%; 
  } 
  ul.checkout-bar:before { 
    background-size: 35px 35px; 
    background-color: #57aed1; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: inset 2px 2px 2px 0px rgba(0, 0, 0, 0.2); 
    border-radius: 10px; 
    content: " "; 
    height: 20px; /* 同步调整进度条已完成部分的高度 */
    left: 0; 
    position: absolute; 
    width: 10%; 
  } 
  ul.checkout-bar li { 
    display: inline-block; 
    margin: 60px 0 0; /* 调整间距，配合方块高度 */
    padding: 0; 
    text-align: center; 
    width: 19%; 
  } 
  /* 媒体查询里的方块样式：同步修改尺寸和定位 */
  ul.checkout-bar li:before { 
    height: 50px; /* 增大高度 */
    left: 40%; 
    line-height: 50px; /* 配合高度垂直居中文字 */
    position: absolute; 
    top: -75px; /* 调整位置，让方块在进度条上方居中 */
    width: 50px; /* 增大宽度 */
    border-radius: 0; /* 确保媒体查询下也是方形 */
    z-index: 99; 
  } 
  ul.checkout-bar li.visited { background: none; } 
  ul.checkout-bar li.visited:after { 
    background-size: 35px 35px; 
    background-color: #57aed1; 
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); 
  }
}

关键修改点说明： #

• 把基础样式和媒体查询里的border-radius都设为0，彻底变成方形；
• 同时修改了基础样式和媒体查询里的width、height、line-height，确保两种屏幕尺寸下方块都有足够大的尺寸；
• 调整了top、margin等定位属性，保证方块和进度条的相对位置协调；
• 同步调整了进度条的高度，让整体视觉更统一。

如果需要进一步调整尺寸，只要同步修改基础样式和媒体查询里对应的值就行，别只改一边哦！

内容的提问来源于stack exchange，提问作者shukla yogesh