【前端技巧】CSS常用技巧碎片（一）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端技巧】CSS常用技巧碎片（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

CSS常用技巧碎片（一）

尺寸体系：内在尺寸：fit-content、min-content、max-content，尺寸表现和内容有关；外在尺寸：stretch、available、fill-available，尺寸表现和上下文有关。
可以用 inset: 0; 实现 left: 0; top: 0; right: 0; bottom: 0; 的效果。
渐变边框实现圆角效果可以用 clip-path: inset(0 round 10px);
可以实现轮廓效果的CSS属性的特征对比表

属性	支持渐变	支持模糊	支持圆角	间歇控制	方位控制
outline	×	×	×（仅Firefox支持）	√（Edge15+）	×
box-shadow	×	√	√	×	√
border-image	√	×（可渐变模拟）	×	√	√

如果需要轮廓带有渐变效果，一定是使用border-image属性。|
如果需要轮廓效果是纯色，且4个角为直角，则优先使用outline属性；如果outline属性不能使用（如无障碍访问需要），则使用box-shadow属性；如果box-shadow属性已经有了其他样式，则使用border-image属性。
如果需要轮廓有圆角效果，则一定是使用box-shadow属性。
如果需要轮廓和元素之间还有一段间隙，则优先使用outline属性；如果outline属性不能使用，则使用border-image属性。
如果需要轮廓只有一个方向，则不考虑outline属性。
如果需要兼容IE浏览器，则border-image属性不考虑。
可以用 position:sticky 实现吸顶效果。
比较好的字体配置方案：

<style>
@font-face {
    font-family: Emoji;
    src: local("Apple Color Emoji"),
    local("Segoe UI Emoji"),
    local("Segoe UI Symbol"),
    local("Noto Color Emoji");
    unicode-range: U+1F000-1F644, U+203C-3299;
}
.emoji {
    font-family: system-ui, -apple-system, Segoe UI, Roboto,
    Emoji, Helvetica, Arial, sans-serif;
}
</style>

动态文本内容换行使用word-break:break-all和wordwrap:break-word组合代码，如果要彻底换行，还可以使用line-break:anywhere。
静态内容排版不建议使用word-break属性、word-wrap属性或者line-break属性，如果是英文单词，则使用软连字符优化排版；如果是非英文单词，则使用<wbr>标签优化排版。
根据指定字符进行对齐：td { text-align: "." center; }
在使用text-decoration: underline;添加下划线时，会与文字底部紧贴，观感较差，可以用text-underline-position: under;来优化下划线的显示位置。如果需要进一步下移下划线位置，可以采用text-underline-offset: 1em;实现。
使用HSL实现按钮点击变暗的效果，很方便

<style>
.button {
    background-color: hsl(213.3, 82.8%, 54.3%);
}
.button:active {
    background-color: hsl(213.3, 82.8%, 50%);
}
</style>

设置白色半透明:hsla(0, 0%, 100%, .5);
纯CSS实现加减按钮

<body>
    <button class="btn-add"></button>
    <button class="btn-sub"></button>
</body>

<style>
    .btn-add,
    .btn-sub {
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid gray;
        background: linear-gradient(currentColor, currentColor) no-repeat center/.875em 2px,
            linear-gradient(currentColor, currentColor) no-repeat center/2px .875em,
            ghostwhite;
        color: dimgray;
    }

    .btn-sub {
        background-size: .875em 2px, 0;
    }
</style>

纯CSS实现网格布局

<body>
    <div class="square"></div>
</body>

<style>
    .square {
        display: inline-block;
        width: 304px; height: 160px;
        background-color: #fff;
        background-image: linear-gradient(45deg, #f00 25%, transparent 25%, transparent 75%, #0f0 75%), 
        linear-gradient(45deg, #00f 25%, transparent 25%, transparent 75%, #faf20a 75%);
        background-size: 16px 16px;
        background-position: 0 0, 8px 8px;
    }
</style>

利用background-clip实现渐变文字

<body>
    <p class="text-gradient">我是渐变文字</p>
</body>

<style>
    .text-gradient {
        font-size: 5rem;
        color: deepskyblue;
    }
    @supports (-webkit-background-clip: text) or (background-clip: text) {
        .text-gradient {
            background: linear-gradient(deepskyblue, deeppink);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
    }
</style>

使用box-shadow内阴影提供按钮操作反馈

<style>
button:active {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
}
</style>

利用box-shadow实现loading动画

<style>
    .loading {
        width: 4px;
        height: 4px;
        border-radius: 100%;
        color: rgba(0, 0, 0, .4);
        box-shadow: 0 -10px rgba(0, 0, 0, .9),
            10px 0px,
            0 10px,
            -10px 0 rgba(0, 0, 0, .7),
            -7px -7px rgba(0, 0, 0, .8),
            7px -7px rgba(0, 0, 0, 1),
            7px 7px,
            -7px 7px;
        animation: spin 1s steps(8) infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

纸张卷角效果

<body>
    <div class="container transform">
        <div class="page"></div>
    </div>
</body>

<style>
    .container {
        padding: 40px 0;
        background-color: #666;
    }

    .page {
        width: 300px;
        height: 200px;
        margin: 0 auto;
        padding: 1em 0 2em;
        background-color: #f4f39e;
        box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
        border-bottom-right-radius: 50% 10px;
        position: relative;
    }

    .page::before {
        transform: skew(-15deg) rotate(-5deg);
        left: 15px;
        bottom: 10px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .3);
    }

    .page::after {
        transform: skew(15deg) rotate(8deg);
        right: 15px;
        bottom: 25px;
        box-shadow: 8px 8px 10px rgba(0, 0, 0, .4);
    }

    .page:before,
    .page:after {
        content: "";
        width: 90%;
        height: 30%;
        position: absolute;
        z-index: -1;
    }

    /* 容器设置这个 */
    .transform {
        transform: scale(1);
    }
</style>

transform变换中使用矩阵函数matrix()，语法：transform: matrix(a, b, c, d, e, f);
- 位移变换使用的是矩阵参数e和f；
- 缩放变换使用的是矩阵参数a和d；
- 旋转变换使用的是矩阵参数a、b、c和d；
- 斜切变换使用的是矩阵参数b和c。
纯CSS实现进度条文章来源地址https://www.toymoban.com/news/detail-533683.html

<body>
    <label>图片1：</label>
    <div class="bar" style="--percent: 60;"></div>
    <label>图片2：</label>
    <div class="bar" style="--percent: 40;"></div>
    <label>图片3：</label>
    <div class="bar" style="--percent: 20;"></div>
</body>

<style>
    .bar {
        line-height: 20px;
        background-color: #eee;
    }

    .bar::before {
        counter-reset: progress var(--percent);
        content: counter(progress) "%\2002";
        display: block;
        width: calc(100% * var(--percent) / 100);
        font-size: 12px;
        color: #fff;
        background-color: deepskyblue;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
    }
</style>