欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

背景顏色和邊框半徑的有趣行為

CSS
錢諍諍2年前8瀏覽0評論

具有邊框半徑和背景顏色的有趣行為

我有下面的html:

<div class="block">
     <div class="button">
        hover me, baby!
     </div>
 </div>

和CSS:

.block {
  background-color: red;
  border-radius: 8px;
  width: 120px;
  text-align: center;
}

.button {
  width: 100%;
  border-radius: inherit;
}

.button:hover {
  background-color: white;
}

當我將鼠標懸停在元素上時，我會看到以下內容: 結果

我想問那是不是一種預期的行為？因為在我看來不是。我有兩個元素，一個父元素和一個子元素。大小相同。具有相同的邊界半徑。您可以檢查元素并確認它們具有相同的寬度和高度。但是無論如何，一旦我懸停在內部元素上，我會看到父元素的紅色小邊框，盡管我沒有任何邊框。

這是密碼筆

你會看到一種邊緣效應，系統不得不決定如何將CSS像素映射到屏幕像素。在現代設備上，一個CSS像素有幾個屏幕像素，有時一個屏幕像素可能會“掉隊”，因此你會看到紅點。

當你放大或縮小時，你會發現這些來來去去。

一個簡單的方法是，當鼠標懸停時，稍微展開子對象。使用變換比例這不會影響任何其他東西的定位。

.block {
  background-color: red;
  border-radius: 8px;
  width: 120px;
  text-align: center;
}

.button {
  width: 100%;
  border-radius: inherit;
}

.button:hover {
  background-color: white;
  transform: scale(1.1);
}

<div class="block">
      <div class="button">
        hover me, baby!
      </div>
    </div>

這是因為您要向包裝器div添加背景色。塊，但是當移動到另一個。按鈕

所以當你懸停在。按鈕會改變。按鈕div背景為白色，但。塊保持不變

為了避免這種情況，我建議將這段代碼從。阻止:

background-color: red;
 border-radius: 8px;

并添加到您的。按鈕，當鼠標懸停時你可以改變它的屬性

完整的代碼將是

.block {
  width: 120px;
  text-align: center;
}

.button {
  width: 100%;
  border-radius: inherit;
  background-color: red;
  border-radius: 8px;
}

.button:hover {
  background-color: white;
}

發生這種情況是因為按鈕的邊框半徑與紅色背景的塊元素的邊框半徑值相同。您可以通過移除按鈕的邊框半徑或向block元素添加懸停選擇器來解決這個問題。

選項1:

.block {
  background-color: red;
  border-radius: 8px;
  width: 120px;
  text-align: center;
}
/* Removed border-radius on button */
.button {
  width: 100%;
  border-radius: 0;
}

.button:hover {
  background-color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Another simple example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div class="block">
      <div class="button">
        hover me, baby!
      </div>
    </div>
  </body>
</html>