【前端技巧】CSS常用知识碎片（六）

CSS常用知识碎片（六）

CSS的变量函数var()与自定义属性

CSS自定义属性命名：支持数字、短横线、空格、CJK文字等，不支持包含$、[、]、^、(、)、%、"等特殊字符特殊字符,若要使用特殊字符，需要加上转义符
CSS自定义属性的作用域:若定义自定义属性在子元素，则无法作用域父元素，所以通常会将自定义属性定义在:root伪类中，保证所有页面和任意标签元素都能使用自定义属性
CSS自定义属性不能自身赋值
CSS自定义属性不支持用在媒体查询中
在HTML标签中设置CSS自定义属性：文章来源地址https://uudwc.com/A/0node

<div style="--color: deepskyblue;">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>

在JavaScript中设置和获取CSS自定义属性

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
<script>
    // 通过setProperty设置
    box.style.setProperty('--color', 'deepskyblue');
    // 通过getPropertyValue获取
    var cssVarColor = getComputedStyle(box).getPropertyValue('--color');
</script>

使用content属性显示CSS自定义属性值的技巧

<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 {
        height: 20px; width: 300px;
        background-color: #f2f2f2;
    }
    .bar::before {
        display: block;
        /* 进度值信息显示 */
        counter-reset: progress var(--percent);
        content: counter(progress) '%\2002';
        /* 宽度的设置 */
        width: calc(1% * var(--percent));
        color: #fff;
        background-color: deepskyblue;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
    }
</style>

文本字符处理能力的升级

利用text-shadow实现3D投影文字效果

<body>
    <span class="text-shadow-3d">立体投影</span>
</body>
<style>
/* .text-shadow-3d {
    font-size: 60px;
    color: deepskyblue;
    text-shadow: 1px 1px #005A79, 2px 2px #005A79, 3px 3px
    #005A79, 4px 4px #005A79, 5px
    5px #005A79, 6px 6px #005A79, 7px 7px #005A79, 8px 8px #005A79;
} */

/* 利用 text-fill-color 简化8个颜色值 */
.text-shadow-3d {
    font-size: 60px;
    -webkit-text-fill-color: deepskyblue;
    color: #005A79;
    text-shadow: 1px 1px, 2px 2px, 3px 3px, 4px 4px, 5px 5px, 6px 6px, 7px 7px, 8px 8px;
}
</style>

利用text-shadow实现文字描边效果

<body>
    <p class="text-stroke-out">外描边</p>
</body>
<style>
.text-stroke-out {
    font-size: 60px;
    color: #fff;
    /* 如果描边宽度只有1px，则只需要4个方向的偏移，因为这里描边宽度为2px，所以使用了8个方向的偏移 */
    text-shadow: 0 2px deeppink, 2px 0 deeppink, 0 -2px deeppink, -2px 0 deeppink, 2px 2px deeppink, -2px -2px deeppink, -2px 2px deeppink, 2px -2px deeppink;
}
</style>

文字描边属性text-stroke

.stroke {
    -webkit-text-stroke: 2px red;
}
/* 等同于 */
/* .stroke {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: red;
} */

利用text-fill-color实现文字渐变效果

<body>
    <span class="text-fill-gradient">文字渐变填充效果</span>
</body>
<style>
    .text-fill-gradient {
        font-size: 60px;
        -webkit-text-fill-color: transparent;
        background: linear-gradient(to right, skyblue, deeppink,
        deepskyblue);
        -webkit-background-clip: text;
    }
</style>

利用text-emphasis-style实现文字强调装饰符

<body>
    宝贝，<span class="emphasis">爱你</span>，<span class="emphasis">比心</span>！
</body>
<style>
    .emphasis {
        -webkit-text-emphasis-style: '❤';
        text-emphasis-style: '❤';
    }
</style>

利用text-size-adjust禁用iPhone横屏时字号自动调整的行为

body {
    -webkit-text-size-adjust: none;
}

利用font-variant实现英文字母的小型大写效果

p.small {
    font-variant: small-caps;
}