一些好玩的css

前言

今天在B站看到一位up主介绍的一些好玩的css，今天给大家分享一下！
主要有这些方面：

1. background-repeat:rounds 使背景图片适应父元素高度自我伸缩；
2. prefers-color-scheme:light || dark检测用户是否有将系统的主题颜色设置为亮色或者暗色；
3. 伪元素 ::selection和::first-letter；
4. text gradient 文字渐变；
5. filter:grayscale(100%) 将彩色图片变为黑白；
6. pointer-event:none || all 当前元素的鼠标事件是否触发；
7. blend modes 混合模式；
8. shape outside 以浮动为例，改变文字左（右）侧排列；
9. 渐变边框

1.background-repeat

我们知道background-repeat一般经常使用的是no-repeat这个值，但是它还有一个很好玩的属性值：rounds，主要作用是让你选定的子元素背景图进行父元素的高度自适应，当你的父元素在原有基础上高出一个选定子元素的高度那么，它就会自动生成自己的一个复制；直接上代码

//style部分
.item{
            display: flex;
            width:50px;
            height: 200px;
            flex-direction:column;
        }
        .item > div{
            width:100%;
            height:50px;
            background-size:50px 50px;
        }
        .item ._top{
            background-image:url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3548746637,2297961548&fm=26&gp=0.jpg') ;
        }
        .item ._middle{
            flex:1;
            background-image:url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3548746637,2297961548&fm=26&gp=0.jpg');
            background-repeat:rounds;
        }
        .item ._bottom{
            background-image:url('https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3548746637,2297961548&fm=26&gp=0.jpg');
        }
//body部分
<div class="item">
            <div class="_top"></div>
            <div class="_middle"></div>
            <div class="_bottom"></div>
</div>

效果图如下：
父元素高度200px

父元素高度250px

2.prefers-color-scheme

这个属性检测用户是否有将系统的主题颜色设置为亮色或者暗色而做出相应的改变。通过css媒体查询来改变，拥有dart和light两种值

3.伪元素 ::selection 和 ::first-letter

• ::selection(改变鼠标选中的文字的颜色和背景颜色)
• ::first-letter(设置文本第一个文字的大小)

代码如下图：

.text{
            width:400px;
            display:flex;
            justify-content: center;
            align-items:center;
        }
        .content{
            font-size:24px;
        }
        .content::selection{
            background-color:#ff9900;
            color:#fff;
        }
        .content::first-letter{
            font-size:48px
        }

<div class="text">
            <div class="content">
                每一个星球都有一个驱动核心，
                每一种思想都有影响力的种子。
                感受世界的温度，
                年轻的你也能成为改变世界的动力，
                百度珍惜你所有的潜力。
                你的潜力，是改变世界的动力！
            </div>
</div>

4.text gradient 文字渐变

字面意思，直接上代码！

.textGradient{
            display:flex;
            justify-content: center;
            align-items:center;
        }
.gradientContent{
            font-size:48px;
            background-image:linear-gradient(90deg,#ff8a00,#e52e71);
            -webkit-background-clip:text;//对文字进行裁剪，文字本身是有颜色的，使用这个属性就会将渐变颜色覆盖露出文字的背景颜色，呈现的状态便是没有背景颜色的状态
            -webkit-text-fill-color:transparent;//将文字本身的背景颜色改为透明色
        }

<div class="textGradient">
    <div class="gradientContent">
      感谢关注！！！
    </div>
</div>

5.filter:grayscale(100%)

将彩色图片变为黑白（使用的环境是在有背景图片的时候，img是否适用尚未检测）

6.pointer-event

pointer-event:none || all 所有的鼠标事件是否触发 主要作用在当点击一个按钮后，给其设置了一个点击后按钮消失的样式，但是正常情况下消失后在按钮上的是事件也尚存在，所以需要这个属性来消除或者启用事件

代码如下：

.btn{
            animation:fade 2s forwards;
}
@keyframes fade{
   from{
      opacity:1;
      pointer-events:all
   }
   to{
       opacity:0;
       pointer-events:none
      }
}

<button style='background-color:yellowgreen;width:50px;'>Click</button>