如何僅使用單個 DIV 顯示此 CSS 圖示？我認為線性漸變作為背景，但直到現在我自己都無法實作。
在這里您可以看到它理論上應該可以作業（當然可以使用不同的顏色）。 如何用 3 種不同的顏色為單個 div 著色？（三分之一藍，三分之一白，三分之一紅）
第一個片段顯示了它的外觀，第二個片段對我來說是一個非常糟糕的試驗，并且不知何故它并沒有像懸停效果一樣失敗......有沒有人可以讓整個事情正常作業？
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}<div class="whitepaper">
<div class="blackframe">URL</div>
</div>
<div class="whitepaper">
<div class="blackframe">URL</div>
</div>body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 10px, black 1px, white);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size: 12px;
font-weight: bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}<div class="whitepaper">URL</div>uj5u.com熱心網友回復：
線性漸變的作業方式是您列出的顏色和值是stops，并且 CSS 會自動填充中間的空間并將其混合為漸變。如鏈接問題中所述，在顏色之間獲得清晰、即時的過渡的方法是在同一位置創建兩個停靠點：一個使用舊顏色，一個使用新顏色。這樣，就沒有“中間”空間來填充漸變。您基本上只是將每種顏色的起點和終點列為停止點，這就是我在這里所做的。
您的背景顏色沒有被覆寫的原因:hover是您background-color在:hover選擇器下使用，它不會覆寫linear-gradient. 如果您background像我一樣將其切換為 ，則效果很好。我相信這個示例與您給出的示例相同。如果我沒有讓它們完美，您可以調整其中的px值。linear-gradient
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background: linear-gradient(to top, white 12px, black 12px, black 28px, white 28px);
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size: 12px;
font-weight: bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}<div class="whitepaper">URL</div>uj5u.com熱心網友回復：
做了一些小改動。將線性漸變更改為不透明的內容并添加背景大小。
您可以使用 調整黑色部分的大小background-size。
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: gray;
}
.whitepaper {
align-items: center;
cursor: pointer;
text-align: center;
background-color: white;
background-image: linear-gradient(to right, rgba(0, 0, 0, 100) 50%, rgba(0, 0, 0, 100) 50%);
background-size: 100% 50%;
background-position-y: center;
background-repeat: no-repeat;
border: 2px solid black;
border-radius: 3px;
color: white;
display: flex;
justify-content: center;
font-size:12px;
font-weight:bold;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}<div class="whitepaper">URL</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/490295.html
上一篇：如何使導航項適應小螢屏尺寸