我想使虛線按鈕繼承背景顏色。 這里是我想要的(但我真的希望能夠改變按鈕的顏色，而不改變破折號背景。) 這是我的代碼:

body {
  font-family:"Open Sans", sans-serif;
}
.btn {
  display: inline-block;
  padding: 0.5em 0.8em;
  vertical-align: top;
  border-radius: 5px;
  position: relative;
}
.btn.red {
  background-color:#dd2c2c;
  color:#f4f4f4;
}
.btn.blue {
  background-color:#2c84dd;
  color:#f4f4f4;
}
.btn.dash {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px),
    inherit;
 }

<div class="btn dash red">Red Button</div>
<div class="btn dash blue">Blue Button</div>

# # #由于重復線性漸變創建圖像，而不是顏色，您可以使用背景圖像設置它，并且您在第二個類中定義的背景顏色也將生效。

body {
  font-family:"Open Sans", sans-serif;
}
.btn {
  display: inline-block;
  padding: 0.5em 0.8em;
  vertical-align: top;
  border-radius: 5px;
  position: relative;
}
.btn.red {
  background-color:#dd2c2c;
  color:#f4f4f4;
}
.btn.blue {
  background-color:#2c84dd;
  color:#f4f4f4;
}
.btn.dash {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 10px,
    rgba(255, 255, 255, 0.2) 10px,
    rgba(255, 255, 255, 0.2) 20px
    );
 }

<div class="btn dash red">Red Button</div>
<div class="btn dash blue">Blue Button</div>

# # #對于未來的訪問:

如果您的目標是應用線性漸變，將透明線條與彩色線條交替顯示，您可以簡單地使用us & quot透明& quot像這樣:

background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.2) 0,
    rgba(255, 255, 255, 0.2) 20px
);