其他查看條件邊界半徑的技巧

回想一下艾哈邁德（Ahmad）Shaded迷人的Facebook CSS Border-Radius“ Toggle”嗎？我以前報導了這種聰明的技術。隨後的文章提供了更深入的分析。

米歇爾·巴克（Michelle Barker）的“評估聰明的CSS解決方案”質疑過度聰明的代碼的智慧：

儘管不可否認，我同意Robin Rendle的CSS-Tricks新聞通訊的評論：“感覺有點太聰明。”

這種情緒引起了共鳴。這種技術在Facebook的資源中有了自己的位置。但是，優先考慮可讀性（例如，使用媒體查詢）優先於聰明但潛在的可維護解決方案，通常是最好的。

Stefan Judis探索了使用即將到來的容器查詢來實現相同的“條件邊界 - 拉迪烏斯”效應：

 /*如果容器的寬度等於或大於 
   視口寬度，卸下邊界 - 拉迪烏斯 */
@Container（width> = 100VW）{
  .conditional-Border-radius {
    邊界拉迪烏斯：0;
  }
}

這種方法更加清晰。 Stefan還提出了一個假設的@when功能時的潛在好處：

 @when容器（width> = 100vw）{
  .conditional-Border-radius {
    邊界拉迪烏斯：0;
  }
}
@別的 {
  .conditional-Border-radius {
    邊界拉迪烏斯：1EM；
  }
}

當整合不確定時，這種@when的可行性仍然不確定。但是，其包含將增強CSS的可讀性和邏輯一致性。

上一篇文章簡要提到了乘法在預防中間值中的作用：結果是8px或0px。為了澄清這一點，下麵包括視頻演示。 （注意：視頻將在實際出版物中插入。）

以上是其他查看條件邊界半徑的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！