css技巧

渐变色文字

<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;
}