CSS3中一些高级属性的应用

关于CSS3

CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展 CSS2.1。

它带来了许多期待已久的新特性， 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式，如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀，应避免在生产环境中使用，或极其谨慎地使用，因为将来它们的语法和语义都有可能被更改。

CSS Level 2 经历了 9 年的时间（从 2002 年 8 月到 2011 年 6 月）才达到推荐状态，主要原因是被一些次要特性拖了后腿。为了加快那些已经确认没有问题的特性的标准化速度，W3C 的CSS 工作组作出了一项被称为 Beijing doctrine 的决定，将 CSS 划分为许多小组件，称之为模块。这些模块彼此独立，按照各自的进度来进行标准化。其中一些已经是 W3C推荐状态，也有一些仍是早期工作草案。当新的需求被肯定后， 新的模块也会同样地添加进来。

从形式上来说，CSS3 标准自身已经不存在了。每个模块都被独立的标准化，现在标准 CSS 包括了修订后的 CSS2.1 以及完整模块对它的扩充，模块的 level（级别）数并不一致。可以在每个时间点上为 CSS 标准定义一个快照（snapshots），列出 CSS 2.1 和成熟的模块。

W3C 会定期的发布这些快照 ，如 2007, 2010, 2015 或 2017。

目前为止，还没有标准（level）超过 3 的模块被标准化，未来应该会有所改变。 不过有些模块，比如 Selectors（选择器）4 或 CSS Borders and Backgrounds（边框和背景）标准4早已拥有了编辑草案，即使它们还没达初次发布工作草案状态。

CSS3 带来众多全新的设计体验，但 web 开发人员最关心的一个问题：浏览器对 CSS3 特性的兼容情况如何？

目前而言，CSS3 特性大部分都已经有了很好的浏览器支持度。各主流浏览器对 CSS3 的支持越来越完善，曾经让多少web开发人员心碎的 IE 也开始挺进 CSS3 标准行列。

当然，即使 CSS3 标准制定完成，现代浏览器要普及到大部分用户也是一个相当漫长的过程。

本文主要是整理一些有趣的且有用的，但容易被忽视的高级属性。以后还会继续补充一些。

-webkit-mask

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

原理：蒙板（CSS3 渐变、半透明的PNG图）元素的 alpha 值为 0 的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。

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

具体属性：

  • mask-image：指遮罩使用的图片资源，默认值是none，也就是无遮罩图片
  • mask-mode：默认值是match-source，意思是根据资源的类型自动采用合适的遮罩模式。
  • 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属性演变而来，因此，Chrome等浏览器都是支持的。但是mask-mode是一个针对所有元素的CSS3属性，Chrome等浏览器并不支持，目前仅Firefox浏览器支持。
  • mask-composite：当同时使用多个图片进行遮罩时候的混合方式

具体使用可查看 客栈说书：CSS遮罩CSS3 mask/masks详细介绍

image-20200818223147353

image-20200818225512618

<style>
    .box_01 { padding: 10px 20px; border: 1px solid #0aa; }
    .box_01 img { width: 290px; }
    .box_01 img.mask { animation: aniMask 2s infinite; }
    @keyframes aniMask {
        0 {
            -webkit-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% {
            -webkit-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="box_01">
    <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141711_6640njffmwvi_small.jpg">
    <img class="mask" src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141711_6640njffmwvi_small.jpg">
</section>

查看 -webkit-mask DEMO

以上只是一个简单的示例。mask是一个非常有趣的属性，我们可以用mask + gradient + animation 制造一些非常酷炫的效果。

-webkit-text-stroke

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

image-20200818232215497

<style>
    .box_02 {
        font-size: 42px;
        font-family: 'Times New Roman';
        text-align: center;
    }
    .box_02 span {
        color: transparent;
        -webkit-text-stroke: 1px red;
    }
</style>

<section class="box_02">
    <span >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-20200818235556880

<style>
    .box_03 {
        font-size: 24px;
        text-align: center;
    }
    .box_03 img {
        width: 200px;
        -webkit-box-reflect: below 5px linear-gradient(to right, transparent, white);
    }
    .box_03 span {
        display: inline-block;
        color: #0aa;
        -webkit-box-reflect: below 5px;
    }
</style>
<section class="box_03">
    <img src="https://my-files-1259410276.cos.ap-chengdu.myqcloud.com/nice/20190419141711_6640njffmwvi_small.jpg">
    <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有相同的长宽比。

注：目前 chrome 目前（2021.10.14）已不支持该属性。

image-20200819002929753

<style>
    .box_04 {
        font-size: 24px;
        text-align: center;
        color: #0aa;
    }
</style>

<section class="box_04">
    <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，可以给文字设置多种颜色，包括渐变色。

image-20200819010543764

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

<section class="box_05">
    <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-20200819013244726

<style>
    .item_06 {
        width: 600px;
        margin-bottom: 10px;
        padding: 20px;
        border: 1px solid #0aa;
    }
    .item_06.columns {
        columns: 3;
        column-rule: 1px solid #0aa;
        column-gap: 30px;
        column-fill: auto;
        height: 210px;
    }
    .item_06.columns h3 {
        column-span: all;
    }
</style>

<section>
    <div class="item_06">
        一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。
    </div>
    <div class="item_06 columns">
        <h3>一轮皓月，柔情似水，洒满心湖，照亮远方</h3>
        一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。一轮皓月，柔情似水，洒满心湖，照亮远方；一株幽兰，清香淡雅，彼此凝望，寂静欢喜；一叶兰舟，盛满思念，载滿祝福，划过秦时明月，穿过唐风宋韵，驶向心灵的渡口。
    </div>
</section>

查看 background-clip DEMO

-webkit-margin-collapse

通常，两个相邻的元素的margin会折叠起来(collapse)，即外边距折叠。这意味着第一个元素的底部的边距和第二个元素的头部边距会被合并到一起。

margin-collapse 可以指定垂直间距的表现形式。元素可以保持它们各自的间距，也可以共同使用一个间距。 这个属性值允许模拟表格在一些浏览器的quirks模式下的行间距表现形式。比如垂直相邻表格单元格的边距可以合并入边框。 margin-top-collapse 控制该元素与其上方相邻元素之间间距的表现形式，而 margin-bottom-collapse 正好相反，控制的是该元素与其下方相邻元素之间间距的表现形式。

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

-webkit-autofill

当元素的值被浏览器自动填充时，会引用 :autofill 伪类的样式。多浏览器的用户代理样式表在其 :autofill 中用 !important 声明了样式，使它们无法用户自定义的样式覆盖。

比如：Chrome 浏览器表单自动填充后，input 文本框的背景会变成黄色的，我们只能通过 input: -webkit-autofill 来修改：

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
    border: 1px solid #CCC!important;
    background-color: transparent!important;
}

其他 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 出现滚动条

参考链接

MDN CSS3

CSS3那些不为人知的高级属性

© lizhao all right reserved，powered by Gitbook文件修订时间： 2022-01-16 18:21:25

results matching ""

    No results matching ""