标签 css 下的文章

要使用嵌套一个div实现

<div class="block">
    <div class="block-in"></div>
</div>

外层要加上 transform-style 和 perspective （视距）才能实现里层的元素3D效果

.block {
  width: 200px;
  height: 200px;
  cursor: pointer;
  /* 3D变形 */
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  
  &-in {
    background: brown;
    height: 100%;
    transition: 0.8s;
  }
  
  &:hover .block-in {
    transform: rotateY(180deg);
  }
}

如果需要实现在翻转后看到背面的元素，还需要将两个元素放到block-in元素里面，使两层重叠，在上面一层元素 上使用 backface-visibility: hidden 属性，使之在翻转后不面向屏幕时隐藏起来；并在里面的元素同时使用 transition: transform .5s; transform: rotateY(0deg); 动画

<div class="block">
    <div class="block-in">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</div>

CSS提示：
翻转前：
box1:transition: transform .5s; transform: rotateY(0deg);
box2:transition: transform .5s; transform: rotateY(0deg); backface-visibility:hidden;

翻转后(box2翻转到90度以后就会隐藏掉，只显示box1了)：
box1:transition: transform: rotateY(180deg);
box2:transition: transform: rotateY(180deg);

语法和兼容性

paint-order: normal | [ fill || stroke || markers ]
//||表示或者，可以并存，因此下面的写法都是合法的：

paint-order: normal;

paint-order: fill;
paint-order: stroke;
paint-order: markers;

paint-order: fill markers;
paint-order: markers stroke;
...

paint-order: fill markers stroke;
paint-order: markers fill stroke;
paint-order: stroke markers fill;
...

原文链接：
https://www.zhangxinxu.com/wordpress/2020/01/css-paint-order/comment-page-1/#comment-401898

在局部容器使用 overscroll-behavior 属性：
语法：

overscroll-behavior: [ contain | none | auto ]{1,2}


/* 单个关键字值 */
overscroll-behavior: auto;     /* 默认值 */
overscroll-behavior: contain;
overscroll-behavior: none;

/* 两个值，分别表示x方向和y方向 */
overscroll-behavior: auto contain;

兼容性
目前Safari浏览器尚不支持，Chrome和Firefox浏览器均支持，IE浏览器则有近似效果属性-ms-scroll-chaining代替，不过需要window 8及其以上版本的系统：
https://caniuse.com/#search=overscroll-behavior

例子：

.child-div{
    overscroll-behavior: contain;
    -ms-scroll-chaining: contain; 
}

效果：
11.png

代码参考：

HTML:
<div class="panel-title"><span>个性标签</span></div>

CSS:
.panel-title span {
    display: inline-block;
    width: 70px;
    font-weight: 500;
    text-align: justify;
    text-align-last: justify;
}
.panel-title:after {
    content: "\FF1A";
}