不是第一

tag

当div的宽高为0时，设border的宽度并设颜色，会发现div像是被分割为4个小三角形， 因此当我们要其中一个小三角时，只需要将其它三个隐藏即可（方法：把那三条边颜色设为transparent即可）

<style>
    div{
    width: 0px;
    height: 0px;
    border-width: 20px;
    border-style: solid;
    border-color: lightgreen pink yellow lightblue;
}
</style>
<body>
     <div></div>  
</body>

tag样式


    #tag {
        width: 118px;
        height: 28px;
        background: rgba(256 169 100) no-repeat center;
        background-size: contain;
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        position: relative;
    }

    #tag::after {
        border: 14px solid #fff;
        content: "";
        border-top-color: transparent;
        border-left-color: transparent;
        border-bottom-color: transparent;
        width: 0px;
        height: 0px;
        position: absolute;
        /* 28 == 14px *2  */
        left: calc(118px - 28px);
        top: 0px;
    }

 /* ----------------- 炫酷 ---------------------- */


    html {
        height: 100%;
        background-image:url(xxxxx);
        background-blend-mode: overlay;

    }

    .tag {
        overflow: hidden;

        position: relative;

        left: 1.5em;

        margin: 8rem auto;

        padding-left: 2em;

        width: 5em;

        height: 2em;

        border-radius: 2em 0.25em 0.25em 2em / 50% 0.25em 0.25em 50%;

        transform-origin: 1em 50%;

        transform: rotate(80deg);

        color: brown;

        font: 700 3em/2em consolas, monospace;

        text-shadow: -1px -1px rgba(255, 255, 255, 0.7), 1px 1px rgba(0, 0, 0, 0.7);

        transition: .5s transform;

        cursor: pointer;

    }

    .tag:before,

    .tag:after {
        position: absolute;

        content: '';

    }

    .tag:before {
        box-sizing: border-box;

        z-index: -1;

        left: 1em;

        top: 50%;

        margin: -0.5em;

        border: double 0.25em #f2674a;

        width: 1em;

        height: 1em;

        border-radius: 50%;

        box-shadow: 0 0 0 6.25em #f2674a;

    }

    .tag:after {
        top: 0.125em;

        right: 0.125em;

        bottom: 0.125em;

        left: 0.125em;

        border: dashed 3px brown;

        border-radius: inherit;

    }

    .tag:hover {
        transform: rotate(690deg);

    }

空两格

text-indent: 2em; 文本空两格

溢出省略

单行&多行

<style>
    .app {
        width: 300px;
        height: 100px;

        background-color: #ededdd;

        overflow: hidden;
        /* 禁止自动换行 */
        white-space: nowrap;
        /* 溢出文本显示省略号 */
        text-overflow: ellipsis;
    }

    /* 
    overflow: hidden;
white-space: nowrap; //强制不换行

两段代码必须加上，否则的话是起不到作用的。
    */
 

    .p {
        width: 300px;
        height: 90px;

/* 多行
    控制行高
    
*/
        line-height: 30px;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
    /* 超出指定行数， 显示省略号 */
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
</style>

<body>


    <div class="app">
        于单行文本溢出 text-overflow: ellipsis 就能完美的解决，而且所有主流浏览器都支持 text-overflow 属性 
    </div>

    <div class="p">
       “塔利班，伟大的谈判者，坚强的战士，”据美国《新闻周刊》，特朗普当天一边称赞阿富汗塔利班，一边激烈指责拜登，“拜登在大流行上完全失败了，他现在正在经历美利坚合众国历史上最大的外交政策羞辱。”

“拜登一团糟地撤出阿富汗，是一个国家领导人严重无能的最令人震惊的表现，可能在任何时刻都是如此（无能）。”他还继续批评拜登没有遵守其政府提出的计划，并哀叹美军在撤离时留下的人员和武器装备。

“这不是撤军，而是彻底投降。”特朗普说。报道称，他还说塔利班尊重自己，如果自己还在位的话，塔利班如此快速接管阿富汗的事情就不会发生。

“我们本可以带着荣誉而离开，我们本应该带着荣誉而离开。然而，我们得到的却是与荣誉完全相反的东西。”这位前任总统还继续尖锐批评道。

在阿富汗塔利班8月15日占领喀布尔后，特朗普已多次公开奚落拜登。15日，他先是在一份声明中讽刺道：“乔·拜登对阿富汗的所作所为堪称‘传奇’，这将成为美国历史上最大的失败之一！ ”紧接着，他还发表了第二份声明，“是时候让乔·拜登不光彩地辞职了。”

当地时间17日，特朗普再次痛批阿富汗撤军“是美国有史以来最大的尴尬，会在数十年里影响美国和世界的关系”。他试图用中国刺激拜登，称中国在目睹塔利班接管阿富汗后“非常开心”，“他们在笑话我们呢”，并有所指地说“美国需要一位受到尊重的总统”。
    </div>
</body>

透明度

 opacity: 0;

过度效果

 transition : 0;