利用 CSS 标签 prefers-color-scheme 使网站支持深色模式

何星星所有网站群现已支持深色模式(iOS, iPadOS, macOS, Windows),如果您的设备开启该模式,将自动将页面随系统切换为暗黑色。 主要实现代码如下: @media (prefers-color-scheme: dark){ html{filter: invert(100%);} img{filter: invert(100%);} } 其中核心代码是 @media(prefers-color-scheme: dark),根据这个 CSS 媒体查询标签,当检测到系统为深色模式后,自动触发标签内的代码。 其后代码 html{filter: invert(100%);} ,将整个

CSS 模型和布局方案

1.CSS 标准盒子模型 CSS 盒子模型 又称为框模型(Box Model),包含元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。     模型中内层是 content 依次是 padding border margin。通常我们设置背景时就是内容、内边距、边框这三部分,如果 border 设置颜色的时候会显示 boder 颜色当 boder 颜色是透明时会显示 background-color 的颜色。而该元素的子元素的是从 content 开始的。而外边距是透明的,不会遮挡其他元素。 元素框的总宽度 = wi

通过 CSS 解决 HTML 页面的复选框或单选框与文字对齐问题

当文字 12px 时,单(复)选框 CSS 设置 height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px; 兼容当前 Chrome Firefox IE EDGE 浏览器显示对齐。 CSS .checkbox_align{height:13px; vertical-align:bottom; margin-bottom:.5px; margin-top:5px;} HTML <div style=”font-size:12px;”> <input class=”checkbox_align”

CSS 定制 Google Chrome 浏览器滚动条样式

/*— 滚动条默认显示样式—*/ ::-webkit-scrollbar-thumb{ background-color:#999; height:65px; outline-offset:-2px; outline:2px solid #fff; -webkit-border-radius:1px; /*border: 2px solid #999;*/ } /*— 鼠标贴合滚动条样式—*/ ::-webkit-scrollbar-thumb:hover{ background-color:#777; height:65px; -webkit-border-radius:1px;

CSS 衔接区块 HTML 样式

指定 id html: <footer id=”footer”>…</footer> css: #footer {font-family: ‘Helvetica Neue’,Helvetica,’Lucida Grande’,Arial,’Hiragino Sans GB’,’\5FAE\8F6F\96C5\9ED1′,’WenQuanYi Micro Hei’,STHeiti,SimSun,sans-serif;}   指定 class html: <div class=”copyright”>…</div> css: .co

CSS 中 IE、Firefox、Chrome、Opera 各浏览器私有属性

-moz 代表 Firefox 浏览器私有属性 -ms 代表 IE 浏览器私有属性 -webkit 代表 Chrome、Safari 私有属性 -o 代表 Opera 浏览器私有属性 举例: <style type=”text/css”> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/ background: -ms-line