色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

當屏幕全寬時,從元素中移除樣式屬性

林子帆1年前7瀏覽0評論

當元素達到整個屏幕寬度時,我需要刪除一個css樣式屬性。例如,當元素達到屏幕的全寬時,樣式的邊框半徑應該設置為0或移除。用javascript很容易做到這一點,但是希望有一個純css解決方案。

body {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  max-width: 500px;
  background: #aaa;
  color: white;
  border-top-right-radius: 20px;
  box-sizing: border-box;
  padding: 20px;
}

<div class="container">Test</div>

由于您的元素是位置:絕對,您可以使用100vw并執行箝位測試。

我有一篇關于這種技術(以及更多)的詳細文章:https://CSS-tricks . com/responsive-layouts-less-media-queries/

body {
  margin: 0;
  padding: 0;
}
.container {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100px;
  width: 100%;
  max-width: 500px;
  background: #aaa;
  color: white;
  /* 0px if 500px > 100vw. 20px if 500px < 100vw */
  border-top-right-radius:clamp(0px,(100vw - 500px)*999,20px);
  box-sizing: border-box;
  padding: 20px;
}

<div class="container">Test</div>