【前端技巧】CSS常用知识碎片(六)

CSS常用知识碎片(六)

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

  • CSS自定义属性命名:支持数字、短横线、空格、CJK文字等,不支持包含$、[、]、^、(、)、%、"等特殊字符特殊字符,若要使用特殊字符,需要加上转义符

  • CSS自定义属性的作用域:若定义自定义属性在子元素,则无法作用域父元素,所以通常会将自定义属性定义在:root伪类中,保证所有页面和任意标签元素都能使用自定义属性

  • CSS自定义属性不能自身赋值

  • CSS自定义属性不支持用在媒体查询中

  • 在HTML标签中设置CSS自定义属性:

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

你可能感兴趣的:(前端技巧,CSS,前端,css)