10 个鲜为人知的 CSS 技巧
今天这篇文章主要分享 10 个鲜为人知的 CSS 技巧，这些技巧将成为你提高网页设计技能的秘密武器。
现在，我们就一起来看看这些CSS 技巧。
01. 网站平滑滚动
在<html>元素中添加scroll-behavior: smooth，以实现整个页面的平滑滚动。
html{scroll-behavior: smooth;}
02.链接的属性选择器
此选择器的目标是具有以“https”开头的 href 属性的链接。
a[href^="https"]{color: blue;}
03.〜合并兄弟姐妹
选择 <h2> 后面的所有兄弟元素 <p> 元素。
h2 ~ p{color: blue;}
04. :not() 伪类
该选择器将样式应用于不具有“特殊”类的列表项。
li:not(.special){font-stlye: italic;}
05. 用于响应式排版的视口单位
使用视口单位（vw、vh、vmin、vmax）可以使字体大小响应视口大小。
h1{font-size: 5vw;}
06. :empty 表示空元素
此选择器定位空的 <p> 元素并隐藏它们。
p:empty{display: none;}
07.自定义属性（变量）
您可以更轻松地定义和使用自定义属性
主题和维护。
:root{--main-color: #3498db;}h1{color: var(--main-color);}
08.图像控制的Object-fit属性
object-fit 控制如何调整替换元素（如 <img>）的内容大小。
img{width: 100px;height: 100px;object-fit: cover;}
09. 简化布局的网格
CSS 网格提供了一种以更简单的方式创建布局的强大方法。
.container{display: grid;grid-tempalte-columns: 1fr 2fr 1fr;}
10. :focus-in 伪类
如果该元素包含任何具有 :focus 的子元素，则 :focus-within 会选择该元素。
form:focus-within{box-shadow: 0 0 5px rgba(0, 0, 0, 0, 0.2);}
总结
以上就是我想与你分享的10个CSS技巧，希望对你有所帮助，如果你觉得有用的话，请记得点赞我关注我。
扫码领红包
微信赞赏
支付宝扫码领红包
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。侵权投诉：375170667@qq.com
