CSS 的一些属性

[starryiu]

记录一些 css 中较新或实用的知识。

CSS :where()

一种没有优先级的选择器，可以更好的进行样式覆盖。

css attr函数

可以简易的控制伪元素的 content 属性。

.my-btn::after {
  content: attr(count);
  position: absolute;
  right: 0;
  top: 0;
  max-width: 14px;
  padding: 2px;
  background-color: red;
  border-radius: 50%;
  color: white;
  font-size: 12px;
  transform: translate(50%, -50%);
}

<button class="my-btn" count="11">按钮</button>

将背景图像设置为文本颜色

.text {
  background-color: aqua;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

css 实现多行省略号

span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

box-decoration-break 属性

在行内元素中，如果存在折行显示，那么每一行都将拥有原本单行的所有完整样式。

只有两个选项，分别为默认的 slice 以及 clone。

.box-decoration-break-test {
  padding-left: 20px;
}
.box-decoration-break-test span {
  border: 1px solid blueviolet;
  background-color: aquamarine;
  padding: 5px;
  line-height: 2em;
  box-decoration-break: clone;
}

了解更多

aspect-ratio 宽高比

之前自己写了个组件实现了这个功能，现在一个 css 属性就能解决了。

.wrap {
  width: 15%;
  aspect-ratio: 1/2;
  background-color: aqua;
}

双横线声明变量

:host {
  --theme-color: aqua;
}
.wrap {
  width: 15%;
  aspect-ratio: 1/2;
  background-color: var(--theme-color);
}

Grid 布局

Grid 布局是目前最新的布局模式，使用起来也非常的方便，不过个人用惯了 flex，不太习惯用 grid。
前端布局整了一圈又回到了格子布局😄。

:host {
  --theme-color: aqua;
}
.wrap {
  background-color: var(--theme-color);
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px;
}
.wrap > .item {
  height: 100px;
  background-color: blueviolet;
}

字体平滑度

在window系统中几乎无影响，主要针对mac和ios。

:root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;    
}

通常直接写在 :root 根元素中。