作为切图仔，这些CSS3属性技巧你应该不会不知道吧？

# 01. 网站平滑滚动

在元素上添加 scroll-behavior: smooth 可以启用全页面的平滑滚动。

html {
  scroll-behavior: smooth; 
}复制

# 02. 链接的属性选择器

这个选择器选择 href 属性以“https.”开头的链接。

a[href^="https"] {
  color: blue; 
}复制

# 03. 同级元素选择器

选择所有紧随 ## 之后的同级元素。

h2 ~ p {
  color: blue;  
}复制

# 04. :not() 伪类

这个选择器给不具有 “special” 类的列表项应用样式。

li:not(.special) {
  font-style: italic;
}复制

# 05. 响应式文字的视口单位

使用视口单位(vw、vh、vmin、vmax)可以使文字大小响应视口尺寸。

h1 {
  font-size: 5vw;
}复制

# 06. 空元素的 :empty 选择器

这个选择器选择空的元素并隐藏它们。

p:empty {
  display: none; 
} 复制

# 07. 自定义属性(变量)

你可以定义和使用自定义属性来更容易地主题化和维护。

:root {
  --main-color: #3498db; 
}
 
h1 {
  color: var(--main-color);
}复制

# 08. 图片控制的 object-fit 属性

object-fit 控制替换元素(如图片)的内容应该如何调整大小。

img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}复制

# 09. 简化布局的 Grid

CSS Grid 提供了一种强大的创建布局的方式。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; 
}复制

# 10. :focus-within 伪类

:focus-within 选择器选择包含任何获得 :focus 的子元素的元素。

form:focus-within {  
  box-shadow: 0 0 5px rgba(0,0,0,.2); 
}复制