CSS3 中一些高级属性的应用

CSS 不再是一个完整大版本，W3C 采用模块化策略，CSS2.1 作为基础，各个模块独立迭代，W3C 定期发布 CSS 快照（snapshot）汇总稳定模块：2007、2010、2015、2017、2021、2024。

部分特性早期以浏览器私有前缀实现，生产环境使用私有前缀属性需要充分评估兼容性风险。

-webkit-mask

现行标准属性是 mask，-webkit-mask 是旧前缀。mask 允许通过遮罩或裁切，隐藏元素的部分或全部可见区域。下面 DEMO 使用无前缀写法。

原理：遮罩（CSS 渐变、半透明的 PNG 图）的 alpha 为 0 时，对应区域不可见；为 1 时完全显示。

mask 属性实际上已经成为了诸多 mask-* 的缩写，这和 background、border 性质是一样的。

具体属性：

  • mask-image：指遮罩使用的图片资源，默认值是 none，也就是无遮罩图片
  • mask-mode：默认值是 match-source，意思是根据资源的类型自动采用合适的遮罩模式。早期仅 Firefox 支持，现行主流浏览器已陆续支持。
  • mask-repeat：默认值是 repeat，行为类似于 background-repeat 属性。
  • mask-position：和 background-position 支持的属性值和表现基本上都是一模一样的。
  • mask-clip：和 background-clip 类似，但是 mask-clip 支持的属性值要多一点，主要是多了个 SVG 元素的 mask-clip 支持。
  • mask-origin：和 background-origin 类似，但是 mask-origin 支持的属性值要多一点，主要是多了个 SVG 元素的 mask-origin 支持。
  • mask-size：和 background-size 类似，支持的属性值也类似，作用是控制遮罩图片尺寸。
  • mask-type：和 mask-mode 类似，都是设置不同的遮罩模式。但还是有个很大的区别，那就是 mask-type 只能作用在 SVG 元素上，本质上是由 SVG 属性演变而来。
  • mask-composite：当同时使用多个图片进行遮罩时候的混合方式

image-20260820002811097

<style>
    .mask {
        padding: 10px 20px;
        border: 1px solid #0aa;
    }
    .mask img {
        width: 240px;
    }
    .mask img.ani-mask {
        animation: ani-mask 2s infinite;
    }
    @keyframes ani-mask {
        0%   {
            mask-image: conic-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
        }
        100% {
            mask-image: conic-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
        }
    }
</style>
<section class="mask">
    <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/金枝玉叶.png">
    <img class="ani-mask" src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/金枝玉叶.png">
</section>

-webkit-mask - DEMO

-webkit-text-stroke

CSS 边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke 可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用 color: transparent 属性，还可以创建镂空的字体。

image-20260820003200575

<section style="font-size: 42px; font-family: 'Times New Roman'; text-align: center;">
  <span style="color: transparent; -webkit-text-stroke: 1px red;">
    Today is good and tomorrow will be the same
  </span>
</section>

-webkit-text-stroke - DEMO

-webkit-box-reflect

-webkit-box-reflect 属性可以在一个特定方向上反映元素的内容。

-webkit-box-reflect:none | <direction> <offset> <mask-box-image>
  • none：无倒影
  • <direction>：指定倒影与对象的方向。取值：above、below、left、right
  • <offset>：设置倒影与对象的距离。
  • <mask-box-image>: 设置倒影的遮罩图像。可以为：none| <url> | <gradient>。

image-20260820003941854

<style>
    .reflect {
        font-size: 24px;
        text-align: center;
        border: 1px solid #0aa;
    }
    .reflect img {
        width: 200px;
        -webkit-box-reflect: below 5px linear-gradient(to right, transparent, white);
    }
    .reflect span {
        display: inline-block;
        color: #0aa;
        -webkit-box-reflect: below 5px;
    }
</style>
<section class="reflect">
    <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/md_images/金枝玉叶.png">
    <span>Today is good and tomorrow will be the same</span>
</section>

-webkit-box-reflect - DEMO

font-size-adjust

font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

字体的小写字母 x 的高度与 font-size 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读。

假如：设置的 font-family 的第一个字体是 Verdana，由于某种原因用户的电脑上没有安装 Verdana，用的是 Arial，那么 Arial 就会被修正，从而和 Verdana 有相同的长宽比。

image-20260820004246956

<section style="font-size: 24px;text-align: center;color: #0aa;">
    <p>
        “砌下梨花一堆雪，明年谁此凭栏杆？”一树梨花一承乾，此番美景属何人，只愿你在树下，梨花落如雪...
    </p>
    <p style="font-size-adjust: 0.4; -webkit-font-size-adjust: 0.4;">
        “砌下梨花一堆雪，明年谁此凭栏杆？”一树梨花一承乾，此番美景属何人，只愿你在树下，梨花落如雪...
    </p>
</section>

font-size-adjust - DEMO

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

  • border-box：背景延伸至边框外沿（但是在边框下层）。
  • padding-box：背景延伸至内边距（padding）外沿。不会绘制到边框处。
  • content-box：背景被裁剪至内容区（content box）外沿。
  • text：背景被裁剪成文字的前景色。

通过值 text，可以给文字设置多种颜色，包括渐变色。Safari 仍常需同时写 -webkit-background-clip: text。

image-20260820004450253

<style>
    .clip {
        font-size: 100px;
        text-align: center;
    }
    .clip .two {
        background: linear-gradient(to right, #0aa 0%, #0aa 50%, red 50%, red 100%); 
        color: transparent;
        background-clip: text;
    }
    .clip .gradient {
        background: linear-gradient(to right, #0aa 0%, red 100%); 
        color: transparent;
        background-clip: text;
    }
</style>
<section class="clip">
    <span class="two">A</span>
    <span class="gradient">A</span>
</section>

background-clip - DEMO

columns

CSS 属性 columns 用来设置元素的列宽和列数。

columns: <column-width> || <column-count>
  • column-count：描述元素的列数
  • column-width：理想的列宽。容器将具有尽可能多的适合的列，而其中任何一个列的宽度均小于该 column-width 值。如果容器的宽度小于指定的值，则单列的宽度将小于声明的列的宽度。
  • column-fill：控制列的高度。auto 指示按顺序填充列；balance 指示内容在各列之间平均分配。
  • column-rule：是 column-rule-color、column-rule-style、column-rule-width 的组合写法，类似 border。
  • column-gap：列之间的间隔。
  • column-span：设置为 all 时，可以让一个元素跨越所有的列。

image-20260820004903088

<style>
    .column {
        width: 600px;
        margin-bottom: 10px;
        padding: 20px;
        border: 1px solid #0aa;
    }
    .column.columns {
        columns: 3;
        column-rule: 1px solid #0aa;
        column-gap: 30px;
        column-fill: auto;
        height: 210px;
    }
    .column.columns h3 {
        column-span: all;
    }
</style>
<section>
    <div class="column">
        一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。
    </div>
    <div class="column columns">
        <h3>一轮皓月，柔情似水，洒满心湖，照亮远方</h3>
        一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。
    </div>
</section>

columns - DEMO

-webkit-margin-collapse

这是旧版 WebKit 私有属性，不是控制外边距折叠的标准方案。标准 CSS 里相邻块级元素的垂直 margin 会折叠，要用 BFC 等方式改变折叠行为。

通常，两个相邻的元素的 margin 会折叠起来（collapse），即外边距折叠。

这意味着第一个元素的底部的边距和第二个元素的头部外边距会被合并到一起。-webkit-margin-collapse 可以指定垂直间距的表现形式。元素可以保持它们各自的间距，也可以共同使用一个间距。

这个属性值允许模拟表格在一些浏览器的 quirks 模式下的行间距表现形式。比如垂直相邻表格单元格的边距可以合并入边框。

  • collapse：两个相邻元素的垂直间距合并成一个间距。
  • discard：如果该元素与其垂直相邻元素之间存在间距，那么将取消该间距。
  • separate：保持两个垂直相邻元素自身的间距。

其他 webkit 属性

  • -webkit-tap-highlight-color: rgba(0,0,0,0)：禁止 iOS（iPhone、iPad）在点击时出现半透明的灰色背景。
  • -webkit-touch-callout: none：触摸并按住触摸目标时候，禁止或显示系统默认菜单
  • -webkit-appearance: none：禁止输入框中的默认样式
  • -webkit-user-select: none：禁止选择文本
  • -webkit-text-size-adjust：网页字体缩放样式
  • -webkit-overflow-scrolling: touch：旧版 iOS 惯性滚动；已废弃，现行 iOS 默认即可惯性滚动

© lizhao all right reserved，powered by Gitbook文件修订时间： 2026-08-20 00:58:10

results matching ""

    No results matching ""