CSS不常用属性收集

[bytemofan]

-webkit-box-reflect 实现倒影和对称效果

isolation:isolate : 用来隔离mix-blend-mode元素的混合

will-change 加速动画

mix-blend-mode 混合模式

background-blend-mode: 背景的混合模式。可以是背景图片见的混合，也可以是背景图片和背景色的混合

text-align-last : 规定如何对齐文本的最后一行，并且只有在text-align的值为justify时才起作用。

:target伪类: 可用于选取当前活动的目标元素。当然 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target

:root : 选择器匹配文档根元素

:target 选择当前活动的元素

::selection 选择被用户选取的元素部分

:empty 选择没有子元素的元素

:not 如:not(p) 选择非 <p> 元素的每个元素

[bytemofan]

:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）

应用： :checked + label :checked ~ label

没选中checkbox： checkbox[name=target]:not(checked) + label

选中checkbox： checkbox[name=target]:checked + label

[bytemofan]

虚化（高斯模糊）背景： -webkit-backdrop-filter:blur(8px) filter:blur(8px)

[bytemofan]

.sticky { position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 15px; }

demo

position:sticky是一个新的css3属性，它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

使用起来也非常简单：

.sticky { position: -webkit-sticky; position:sticky; top: 15px;
} 目前来说还需要用私有前缀

[bytemofan]

vh、vw、vmin、vmax属性，自适应布局

[bytemofan]

-webkit-background-clip: text 可以用它实现带纹理的文字。如：

[bytemofan]

background: conic-gradient(#fff 0%, #000 100%); 圆锥渐变效果 https://css-tricks.com/snippets/css/css-conic-gradient/

[bytemofan]

text-fill-color、text-stroke实现镂空效果：

p {
    text-align: center;
    line-height: 3;
    font-size: 20vh;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #333;
}

[bytemofan]

clip-path mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path 可实现效果：

/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

[bytemofan]

shape-outside mdn:https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside 可实现效果：

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* Global values */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

[bytemofan]

text-transform: uppercase; 把文字转换成大写

[bytemofan]

counter-reset、counter-increment、counters(name, '')

example:

<ul>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>

ul {
  counter-reset: counter;
}
li::before {
  counter-increment: counter;
  content: counters(counter, '.') ' ';
}

效果：

CSS计数器对于生成大纲列表特别有用，因为计数器的新实例是在子元素中自动创建的。使用counters() 函数，可以在不同级别的嵌套计数器之间插入分隔文本。

[bytemofan]

自定义滚动条

/* 文档顶层默认的滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

/* 定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* 定义滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* 可滚动元素的滚动条 */
.some-element::webkit-scrollbar {
}

[bytemofan]

文本选中时的样式自定义

::selection {
  background:red;
  color: black;
}
.custom-text-selection::selection {
  background:blue;
  color: white;
}

[bytemofan]

渐变文本

.test-text {
  background: -webkit-linear-gradient(pink, red);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}