网站开发中CSS3的裁剪与遮罩

在网站开发中,CSS3裁剪与遮罩(Clipping and Masking)用来隐藏元素的一部分而显示另一部分,裁剪使用路径、遮罩使用图像来控制元素的显示。


CSS3裁剪属性

属性属性说明
clip旧的裁剪属性,只适用于绝对定位元素,只能用矩形
clip-path设置多个元素的混合模式
background-clip设置背景裁剪

1. clip: auto | rect(top, right, bottom, left)

设置绝对定位元素的裁剪,为不建议使用的属性,auto值为默认值。

自对象左上角(0,0)计算的四个偏移数值。如果为auto,则此边不剪切。

2. clip-path: <clip-source> | [<basic-shape> || <geometry-box>] | none

使用基础形状或引用clipPath元素裁剪元素,none值为默认值。

属性值含义
none默认值,不裁剪
basic-shape使用基础形状裁剪元素(类似于CSS3 Shape中的形状)
<geometry-box>=<shape-box> | fill-box | stroke-box | view-box设置基础形状的引用盒模型
<clip-source> = <url>引用svg定义的<clipPath>元素

1) 使用基础形状裁剪元素

示例代码解释说明
clip-path: circle(50% at 50% 50%);
圆形裁剪
clip-path: ellipse(25% 40% at 50% 50%);
椭圆形裁剪
clip-path: inset(12% 12% 15% 10%);
矩形裁剪
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);三角形裁剪
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 100%);菱形裁剪
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);五边形裁剪
使用CSS Clip - path Maker--Cippy或使用谷歌浏览器插件CSS Shapes Editor创建编辑clip-path

2) 引入svg定义的<clipPath>元素裁剪元素

<img class="clip-svg" src="legendit.jpg" alt="Legend IT Inc.">

<svg width="0" height="0">

    <defs>

        <clipPath id="myClip">

            <circle cx="100" cy="100" r="40" />

            <circle cx="60" cy="60" r="40" />

        </clipPath>

    </defs>

</svg>

<style>

    .clip-svg{clip-path: url(#myClip);}

</style>

3) 使用文本裁剪背景图像

-webkit-background-clip: text;

目前只支持webkit内核浏览器,使用polyfill解决问题。


CSS3遮罩属性

属性属性说明
mask-image设置元素的遮罩图像
mask-mode (mask-type)设置遮罩模式
mask-repeat设置遮罩重复
mask-position设置遮罩位置
mask-clip设置遮罩影响区域
mask-origin设置计算make-position时的参考原点位置
mask-size设置遮罩大小
mask-composite设置当前遮罩图层与下面图层的结合方式

1. mask-image: none | <image> | <mask-source>

设置元素的遮罩图像,none值为默认值。

属性值含义
none默认值,不遮罩
<maske-source>=<url>指定<mask>元素的引用,如url(abc.svg#mask)
<image>指定遮罩图像,像url(legendit.png)

2. mask-mode: alpha | luminance | auto

属性值含义
auto默认值,根据mask-image值类型自定指定模式
alpha遮罩图像的透明度部分用作遮罩
luminance
遮罩图像的亮度用作遮罩

3. mask-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

属性值含义
no-repeat默认值,不重复
repeat重复
space以相同的间距平铺且填充满整个容器或某个方向
round自动缩放直到适应且填充满整个容器

4. mask-position: <position> [, <position> ]*

<position> = [ left | center | right | top | bottom | <percentage> | <length> ]

属性值含义
left | center | right | top | bottom关键字
<percentage>、<length>百分比、数值,可以为负值


CSS3边框遮罩属性

属性属性说明
mask-border-source设置边框遮罩的图像
mask-border-mode设置边框遮罩的模式
mask-border-slice设置边框遮罩的切割方式
mask-border-width设置边框遮罩的宽度
mask-border-outset边框遮罩超越边框的数值
mask-border-repeat边框遮罩重复方式
mask-border边框遮罩复合属性

浏览:335 | 点赞:137 | 评论:0
全部评论
暂无评论

快速评论