【广州前端】- CSS小技巧 - 黑马程序员技术交流社区

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

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

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

/* 让类名为 desaturate 的 img 显示黑白色 */

img.desaturate {

            filter: grayscale(100%);

        }

[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;

        }

[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); */

        }

[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)));

        }

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

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

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

 

 .blur {

            color: transparent;

            text-shadow: 0 0 3px rgb(0, 0, 0);

        }