1、 快速黑白图像Demo：Demo：

[HTML] 纯文本查看 复制代码

    <img class="desaturate" src="./timg.jpg">

[CSS] 纯文本查看 复制代码

/* 让类名为 desaturate 的 img 显示黑白色 */
img.desaturate {
            filter: grayscale(100%);
        }

2、 巧用 :not( ) 方法选择
Demo：

[HTML] 纯文本查看 复制代码

    <ul class="nav">
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
    </ul>

[CSS] 纯文本查看 复制代码

/* 常规写法 */
        .nav li {
            border-bottom: 1px solid #ccc;
        }

        .nav li:last-child {
            border-bottom: none;
        }

[CSS] 纯文本查看 复制代码

/* 使用 :not( ) 写法 */
        .nav li:not(:last-child) {
            border-bottom: 1px solid #ccc;
        }

3、 纯CSS写三角形Demo：

[HTML] 纯文本查看 复制代码

    <div class="arrow"></div>

[CSS] 纯文本查看 复制代码

 
div.arrow {
            margin: 10px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #2f2f2f;
            /* 默认向上 */
            /* 向右 */
            /* transform: rotate(90deg); */
            /* 向下 */
            /* transform: rotate(180deg); */
            /* 向左 */
            /* transform: rotate(-90deg); */
        }

4、 文本渐变
Demo：

[HTML] 纯文本查看 复制代码

  <h2 data-text="今天天气不错">今天天气不错</h2>

[CSS] 纯文本查看 复制代码

 
 h2[data-text] {
            position: relative;
        }

        h2[data-text]::after {
            content: attr(data-text);
            z-index: 10;
            color: #e3e3e3;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
        }

5、 文本毛玻璃效果
Demo：

[HTML] 纯文本查看 复制代码

    <p class="blur">您吃了吗</p>

[CSS] 纯文本查看 复制代码

 
 .blur {
            color: transparent;
            text-shadow: 0 0 3px rgb(0, 0, 0);
        }

本贴所有 Demo案例 ，可以下载附件查看

点击查看更多精彩前端资源

点击有惊喜

1、 快速黑白图像Demo：Demo：

[HTML] 纯文本查看 复制代码

    <img class="desaturate" src="./timg.jpg">

[CSS] 纯文本查看 复制代码

/* 让类名为 desaturate 的 img 显示黑白色 */
img.desaturate {
            filter: grayscale(100%);
        }

2、 巧用 :not( ) 方法选择
Demo：

[HTML] 纯文本查看 复制代码

    <ul class="nav">
        <li>AAA</li>
        <li>BBB</li>
        <li>CCC</li>
    </ul>

[CSS] 纯文本查看 复制代码

/* 常规写法 */
        .nav li {
            border-bottom: 1px solid #ccc;
        }

        .nav li:last-child {
            border-bottom: none;
        }

[CSS] 纯文本查看 复制代码

/* 使用 :not( ) 写法 */
        .nav li:not(:last-child) {
            border-bottom: 1px solid #ccc;
        }

3、 纯CSS写三角形Demo：

[HTML] 纯文本查看 复制代码

    <div class="arrow"></div>

[CSS] 纯文本查看 复制代码

 
div.arrow {
            margin: 10px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #2f2f2f;
            /* 默认向上 */
            /* 向右 */
            /* transform: rotate(90deg); */
            /* 向下 */
            /* transform: rotate(180deg); */
            /* 向左 */
            /* transform: rotate(-90deg); */
        }

4、 文本渐变
Demo：

[HTML] 纯文本查看 复制代码

  <h2 data-text="今天天气不错">今天天气不错</h2>

[CSS] 纯文本查看 复制代码

 
 h2[data-text] {
            position: relative;
        }

        h2[data-text]::after {
            content: attr(data-text);
            z-index: 10;
            color: #e3e3e3;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
        }

5、 文本毛玻璃效果
Demo：

[HTML] 纯文本查看 复制代码

    <p class="blur">您吃了吗</p>

[CSS] 纯文本查看 复制代码

 
 .blur {
            color: transparent;
            text-shadow: 0 0 3px rgb(0, 0, 0);
        }

本贴所有 Demo案例 ，可以下载附件查看

点击查看更多精彩前端资源

点击有惊喜