渐变色文字
<h2 class="gradient-text">Gradient text</h2>
<style>
.gradient-text {
background-image: linear-gradient(90deg, red, blue);
background-clip: text;
color: transparent;
}
</style>
顺滑滚动
html {
scroll-behavior: smooth;
}
text-shadow 多阴影设置
<style>
.so-many-shadows {
text-shadow:
3px 3px 0 yellow,
6px 6px 0 blue,
9px 9px red,
12px 12px 0 black;
}
</style>
使用 outline 实现偏移“边框”效果
.outline {
outline: 2px solid white;
outline-offset: -10px;
}
border-radius 的斜线语法
.border-radius {
border-radius: 50px 25px / 25px 50px;
}
为被选择的文本设置样式
::selection {
background-color: rgba(238, 99, 82,1);
color: white;
}
控制第一个段落的样式
<main class="main">
<h2>The first child pseudo-selector</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae porro dolor commodi consequatur consectetur dolores omnis perferendis! Earum ab facilis rerum blanditiis labore? Praesentium, ea similique dolorum et harum voluptate.</p>
<p>Excepturi,... soluta suscipit eveniet enim facilis eius quis?</p>
<p>Itaque at, aut ... Delectus minus quis dignissimos commodi. Culpa, nesciunt!</p>
<p>Aliquam itaque perferendis ... deserunt odio laudantium vel obcaecati!</p>
</main>
<style>
.main { font-size: 1rem; }
.main p:first-of-type { font-size: 1.25rem; }
</style>
drop-shadow 这个 filter 功能函数
这边有一张背景透明的 png 图片。想要给图片里的文字加阴影怎么办呢?
filter: drop-shadow(10px 10px 10px black)
:not
伪类的妙用
:not
有很多使用方式。比如用它和 :first-child
/:last-child
结合使用,就能实现设置除第一个/最后一个之外的元素样式。
<nav class="nav">
<ul class="nav-list">
<li class="nav-item"><a href="" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">About</a></li>
<li class="nav-item"><a href="" class="nav-link">Support</a></li>
<li class="nav-item"><a href="" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="" class="nav-link">Contact</a></li>
</ul>
</nav>
<style>
.nav-item:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.25); }
<style>
自定义输入框的占位文本样式
我们可以使用 ::placeholder
伪元素自定义输入框的占位文本样式。
input {
font-weight: 800;
color: #d27054;
}
::placeholder {
opacity: 1;
font-weight: 300;
color: #666;
font-size: 1rem;
}