B
B
Blog
搜索文档…
⌃K

CSS 特殊用法

精选技巧

  • Website: Support dark mode
When your system uses Dark Mode (System Preferences -> General -> Appearance -> Dark)
body {
color: black;
background: white;
}
@media (prefers-color-scheme: dark) {
body {
color: white;
background: black;
}
}
.box-shadow {
box-shadow: 2px 4px 8px #585858;
}
.drop-shadow {
filter: drop-shadow(2px 4px 8px #585858);
}
/* body 或指定的 container */
body {
scroll-behavior: smooth;
}
.cursor-image {
cursor: url(https://picsum.photos/20/20), auto;
}
.cursor-emoji {
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"),
auto;
}
.overflow-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.overflow-multi-lines {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
<!-- 注意锚点的使用 -->
<div class="wrapper">
<a href="#demo-modal">Open Demo Modal</a>
</div>
<div id="demo-modal" class="modal">
<div class="modal__content">
<h1>CSS Only Modal</h1>
<p>
You can use the :target pseudo-class to create a modals with Zero JavaScript. Enjoy!
</p>
<a href="#" class="modal__close">&times;</a>
</div>
</div>
.modal {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(77, 77, 77, .7);
transition: all .4s;
}
/* 重点:伪类 target */
/* :target CSS 伪类 代表一个唯一的页面元素(目标元素),其id 与当前URL片段匹配. */
.modal:target {
visibility: visible;
opacity: 1;
}
.box {
background: #999;
}
.box:empty {
background: #fff;
}
/* 注意兼容性 */
.custom-scrollbar::-webkit-scrollbar {
width: 12px;
background-color: #eff1f5;
}
.custom-scrollbar::-webkit-scrollbar-track{
border-radius: 3px;
background-color: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb{
border-radius:5px;
background-color:#515769;
border:2px solid #eff1f5
}
<!-- 重点1:data-tooltip -->
<p>
You can also hover <span class="tooltip" data-tooltip="This is Tooltip Content">here</span> to see another example.
</p>
.tooltip {
position: relative;
border-bottom: 1px dotted black;
}
/* Tooltip box */
.tooltip:before {
content: attr(data-tooltip);
position: absolute;
width: 100px;
background-color: #062B45;
color: #fff;
text-align: center;
padding: 10px;
line-height: 1.2;
border-radius: 6px;
z-index: 1;
opacity: 0;
transition: opacity .6s;
bottom: 125%;
left: 50%;
margin-left: -60px;
font-size: 0.75em;
visibility: hidden;
}
/* Tooltip arrow */
.tooltip:after {
content: "";
position: absolute;
bottom: 75%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
opacity: 0;
transition: opacity .6s;
border-color: #062B45 transparent transparent transparent;
visibility: hidden;
}
.tooltip:hover:before, .tooltip:hover:after {
opacity: 1;
visibility: visible;
}
  • 自定义输入框光标的颜色
input {
/* 注意兼容性 */
caret-color: red;
}
  • input 的 伪类 ::in-range :out-of-range
<label for="numberInput">合法整数:1-10</label>
<input id="numberInput" type="number" max="10" min="1">
input:in-range {
background-color: #dfdfdf;
}
input:out-of-range {
background-color: red;
border: 1px solid red;
}