重构笔记Vol

认识CSS属性之clip-path

2016/06/20 · CSS ·
clip-path

本文由 伯乐在线 –
古鲁伊
翻译,艾凌风
校稿。未经许可,禁止转载!
英文出处:Nitish
Kumar。欢迎参与翻译组。

Web
页面以长方形为主,相比较之下,平面媒体在形象方面更具各类性。造成那种差其余原由之一就是,在
web 页面开发中缺乏像平面媒体中那样合适的工具。

正文种带您认识 clip-path 属性,那性格情使你可以隐藏成分的某有些,可知区域由设置的参数值所决定。我们先读书基本概念,而后介绍
clip-path 语法,末了来看下更高深的概念。

     首先介绍一下,我觉着前端开发都以很富有分享精神的,很多少人都写出了诸多理想的下结论经验供新手们参考,本人只是个搬运工,将别人可以的篇章展开了总计,本文紧要转发自
 大漠  的文章 

顾名思义“剪切”和“遮罩”这七个东西都可以精通为隐蔽和显示成分的某些部分。不过在CSS中“clip”和“mask”却会因为用法不一致、语法不一样、浏览器的支撑程度不一造成有的疑难的标题应运而生影响了开发者的选取。可悲的是还有卓殊多过时的音信。

CSS
发展到明天早就越来越强大了。其语法的多如牛毛,让不少原先已毕不了的政工,今后能够充足轻松的姣好。前天就向我们介绍多少个相比较新的强大的
CSS 成效:

基本概念

Clipping (裁剪)就是从某物上修剪下一块。在前端中,clipping
就是一种一体化或一些地隐藏页面成分的操作。关于
clipping,本文还会提及其他多少个概念:clipping path(剪裁路径)
clipping region(剪裁区域)

Clipping path 是用来裁剪成分的路径,可以标记出 clipping region。clipping
path 可以是基础形状只怕是复杂的五头路径。而 clipping path
围起来的区域就是 clipping region 了。

浏览器会裁剪掉 clipping
region 以外的区域,不仅是背景及其余类似的内容,也囊括 border、text-shadow 等。更赞的是,浏览器不会捕获成分 clipping
region 以外的 hoverclick 等事件。

不怕前几日有的一定成分不受长方形限制,但事实上成分周围的情节如故会以为成分是原始形状(长方形)的,并按此展开文档流的布局。要想使周围成分依照成分裁剪后的模样进行布局,可以采取 shape-outside 属性。这么些天性的详细信息可以运动 这篇
SitePoint
教程 。

注意,请不要将这一个天性与 clip
属性 混淆。一般情状下请幸免使用
clip 属性,因为它受广大范围并且只支持长方形裁剪。

   
 在Web网页中重假如以矩形分布的。而平面媒体则扶助于越来越多分裂的形象。造成那种差异的案由是因为缺乏适当的工具去贯彻大家平面媒体中的内容。这也就造成了过多设计师的创意表明,就终于有新意,前端完成也将送交巨大的开发花费。

接下去大家得以考虑试着消除那个题材。

  • clip-path
  • shape-outside

语法及拔取

应用这么些天性的科学语法如下:

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

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

上述属性值包蕴:

``clip-source 可以是内、外部的 SVG <clipPath> 元素的 URL 引用。

basic-shape 可以是 CSS Shapes
说明 中定义的根基形状函数。

``geometry-box 是可选的参数。此参数和 basic-shape
函数一起使用时,可以为 basic-shape 的剪裁工作提供参考盒子。假诺
geometry-box
由本人指定,那么它会动用指定盒子的造型作为裁剪的门路,包涵其余(由
border-radius 属性提供的)角的形态。大家稍后会详细表明。

前些天来探望上边采取基础形状函数的 CSS 代码:

JavaScript

img { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }

1
2
3
img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

那段代码会将具备的图样裁剪为菱形。可是怎么图片会被裁剪为菱形而不是梯形或平行四边形呢?那有赖于函数中的顶点值。下图表明了扭转多边形裁剪路径的条条框框:

澳门葡京 1

多方形裁剪路径图

 

逐个点的首先个坐标值决定了它在 x 轴上的职位,首个坐标值指定了它在 y
轴的地方,所有点是顺时针绘制的。比如菱形最右侧的点,它位于 y
轴下方一半处,所以它的 y 坐标是 50%。同时那个点位于 x
轴的最左边,所以它的 x 坐标是 100%。其余点的坐标同理可得。

虽然CSS Shapes Module Level
1(CSS形状模块标准1)的标准出现,能够打破矩形设计的限定。但仍必要一些畸形的图纸。而早前落成部分窘迫的图形,都需依靠其他的因素功效,比如CSS绘制图形,很多时候就凭借于伪成分,或多个要素。如此一来,CSS
Shapes依然不能表达其有力的作用,让大家的Web打破常规的矩形布局。可是值得庆幸的是,CSS的clip-path出现,它可以扶持我们绘制很多新鲜的图片(不规则的图片),地址是
    比如:

“剪切”和“遮罩”之间的不同

shape 的意味是图片,CSS shapes 约等于 CSS 图形的意味,相当于应用 CSS
生成各个图片(圆形、矩形、椭圆、多边形等几何图形)。

利用 geometry-box 裁剪成分

当裁剪 HTML 元素时,geometry-box(或参阅盒子)能够是
margin-boxborder-boxpadding-box
content-boxgeometry-box 的用法如下:

.clip-me { clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
margin: 10%; }

1
2
3
4
.clip-me {
  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
  margin: 10%;
}

在上例中,成分的 margin-box
会作为参考,来支配裁剪点的实际上地点。点(10%,10%)是 margin-box
的左上角,所以 clip-path 的永恒会依照此点进行总结。

剪裁 SVG 元素的情事下,geometry-box 可以是 fill-boxstroke-box
和 view-boxview-box 值在未曾点名的状态下,默许使用近来的 SVG 视口作为参考盒子。

澳门葡京 2

“遮罩”指的是图形;

CSS3之前,大家能做的唯有矩形,四四方方,条条框框。

clip-path 的使用

其一性子可以用来做一些幽默的事。首先,它可以改良文本内容。让大家来看一下上边的图形,标题的背景和第二段都应用了 clip-path 属性:

澳门葡京 3

重构笔记Vol。clip-path 示例

使用渐变或此外类似技术可以很容易地贯彻率先个背景。然而尚未 clip-path 的辅助,生成首个背景就没那么不难了。注意,音讯框样式背景尾部的线不是程度的,而有一点倾斜。使用 clip-path 达成这些效应只需一行简单的 CSS 代码:

.p-msg { clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%,
50% 80%, 0% 75%); }

1
2
3
.p-msg {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);
}

背景有 7 个极端,那在多边形的 clip-path 中颇具呈现。可能你会问我是何许得出这几个坐标的。那么些难题我会留给读者们消除,这样可以帮忙你们更好地驾驭概念。打开下边的 CodePen 可以看出完结代码:

你也得以用那特本性将图纸裁剪成差其他样子,并加点 CSS 来将它们排列的更为炫酷。画廊中的缩略图不必是长方形的,用户头像的形象也得以随心所欲。本文将图纸做成菱形的。因为兼具的图纸都是基础菱形的,所以可以共用 clip-path 的值。上边是最左侧图片的 CSS 代码:

.right { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
position: relative; top: -352px; left: 256px; }

1
2
3
4
5
6
.right {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: relative;
  top: -352px;
  left: 256px;
}

使用 clip-path 的图样效果如下:

clip-path 还是能做愈来愈多的事——你可以做出奇形怪状的按钮,或给导航菜单添加好玩的 hover 效果,唯有想不到,没有做不到!

那就是说这篇文章,大家就伙同来询问那天性格。

“剪切”指的是路线。

 

加上动画

其一天性也得以与动画片相结合。不过必须铭记,最终形状的顶点数必须和开头形状的顶点数相同。那很重点,否则浏览器会不清楚在哪添加多余的顶峰(或是从哪移除顶点)。如下 CSS 代码为梯形添加了动画:

JavaScript

@keyframes polygons { 25% { clip-path: polygon(20% 0%, 100% 38%, 70%
90%, 0% 100%); } 50% { clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0
100%); } 70% { clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
} }

1
2
3
4
5
6
7
8
9
10
11
@keyframes polygons {
  25% {
    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
  }
  50% {
    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
  }
  70% {
    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
  }
}

在动画的末尾一段,梯形会成为三角形。如上文提到的,大家无法改变顶点的多少还可看着动画会是一马平川的,改变顶点数目会导致动画过渡生硬。为了消除那个标题,我在最后一个多方形中把前两极不相同设置为同样的,那样四边形就足以周详的转移为三角形了。

学学这些天性在此之前大家先精通一下包容性

想象一下一个正方形的图样从左到右从灰褐到黄色渐变,它就足以作为一个遮罩层。浅绛红的渐变部分将穿透成分显示透明,而奶油色部分则如故正常突显,最后的显现成分从左到右褪去的功能。那实在与photoshop里的图层遮罩原理很像

CSS3

CSS3出去后,大家有了更常见的施展空间,通过

  • border-radius
  • border
  • transform
  • 伪成分协作
  • gradient 渐变

大家可以作出丰硕多的几何图形。

而外最常见的矩形,圆形(border-radius),上面稍微列举部分别样几何图形:

浏览器支持性

IE 和 Edge 不帮助那么些性情。Firefox 仅有的帮助 clip-path (它只援救 url() 语法)。不过 47 以上的版本,激活 Firefox 的 layout.css.clip-path-shapes.enabled 选项就可以协助那本本性了。

Chrome、Safari 和 Opera 要求利用 -webkit- 前缀支持此属性。不幸的是,它们还不协理外部的 SVG 形状。越来越多浏览器匡助性音信方可访问 Can
I Use 。

浏览器包容性

看样子此间,大家自然会问,浏览器包容性怎样?

IE 和 Edge 不支持那几个本性。Firefox 仅部分支持 clip-path (它只支持 url() 语法)。可是47 以上的本子,激活 Firefox
layout.css.clip-path-shapes.enabled挑选就足以支撑那性情子了。

Chrome、Safari 和 Opera
须要运用 -webkit- 前缀扶助此属性。不幸的是,它们还不扶助外部的
SVG 形状。越来越多浏览器援助性音讯如下:

澳门葡京 4

澳门葡京 5

三角形

一般性会接纳透明的border模拟出一个三角形:

.traingle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid yellowgreen;
}

澳门葡京 6

总结

本文介绍了关于 clip-path 的核心内容,可以扶助你入门。学习应用那几个天性并不会开销太多的日子,不过成立性的利用就须求多多锻练了。当浏览器广泛支持此属性时,你就足以运用 clip-path 制作出酷炫的功用了。

此外还有五款工具值得介绍——BennettFeely 的 clippy 和 CSS Plant 的 clip
path 生成器 。它们能够为你制造复杂的绝大多数形路线带来福利。

您用clip-path做出过什么炫酷的文章吗?请在留言中提供链接。

打赏协助我翻译更加多好小说,多谢!

打赏译者

基本概念

clip-path从单词”clip
path”的直译上来说,表示的就是裁剪路径。既然有裁剪,大家就来询问这一个中的多少个大约的概念。

裁剪尽管从某样东西剪切一块。比如说,大家在<img>要素上,依据须求,剪切一部分内需留下的区域。而在整体裁剪中,将会碰着七个相关的定义:剪裁路径(Clipping
Path)
剪裁区域(Clipping Region)

剪裁路径是大家用来裁剪元素的路子,它标志了大家须求裁剪的区域。它可以是个大致的形状(比如Web中普遍的矩形),也足以是一个参差不齐的多方面形(不规则的多边形)。

剪裁区域是裁剪路径闭合后所包括的任何区域。

 澳门葡京 7

那样一来,成分分为两局地,裁剪区域和剪裁区域外。浏览器会裁剪掉裁剪区域以外的区域,不仅是背景及其他类似的内容,也席卷bordertext-shadow 等。更赞的是,浏览器不会捕获成分裁剪区域以外的 hoverclick 等事件。

 尽管明天有的一定成分不受长方形限制,但骨子里成分周围的始末仍然会觉得成分是原始形状(长方形)的,并按此开展文档流的布局。要想使周围成分依照成分裁剪后的形状举办布局,可以运用 shape-outside属性。有关于shape-outside有关详细的牵线,可以阅读有关于CSS
Shapes相关的科目,那里不开展过多演讲。

“剪切”是矢量的门道,外部的门道是透明的,内部的路线是不透明的。

切角

《CSS Secret》里面的不二法门,选择多重线性渐变完结切角。

.notching {
    width: 40px;
    height: 40px;
    padding: 40px;
    background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,
        linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,
        linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,
        linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

澳门葡京 8

打赏帮忙我翻译更加多好小说,谢谢!

任选一种支付情势

澳门葡京 9
澳门葡京 10

1 赞 收藏
评论

旧的clip

CSS Masking Module Level
1中也提供了一个clip属性。可以说clip是CSS中冒出的首先种裁剪技术。其实明白过clip的同桌都领会,它就是通过overflow:hidden将裁剪区域外的成分隐藏掉了。可以说它不是当真的剪裁。

clip质量到方今截至,仅帮忙rect()函数,就是裁剪出一个矩形(其他形状还不大概落到实处)。

clip: rect(<top>, <right>, <bottom>, <left>);

在CSS2.1中,rect()<top><bottom>点名偏移量是从成分盒子顶部边缘算起;<left><right>点名的偏移量是从元素盒子左边边缘算起。

澳门葡京 11

越来越无奈的是,clip属性只好在要素设置了position:absolute或者position:fixed起功用。不大概在装置position:relativeposition:static上工作。

在CSS中,clip 属性是已不合时宜的,相当于说它曾经不再指出被运用,因为有一个创新的、规范的本子,各类浏览器也将聚齐全力运用它。

当然,clip也是有一对优势的:因为clip是运作在浏览器中的,它可能会一向有效。而浏览器对它的帮助是可怜强大的:大致是平素的逐个浏览器。此外,我也听他们讲过了,它作出的卡通片效果胜过任何的新章程。

只是比起它的优势,clip有多少个更为主要的欠缺,这也使得它难以被广泛地动用:

  • clip 只对相对定位的成分有效
  • clip 只好用于矩形,即rect()函数

那实在是相当大的限制!所以来让我们跟着说接下来更为主要的习性clip-path

 如果你是第一次接触过clip属性,我建议您花点时间阅读一下这篇文章,它能帮助你对clip有一个简单的了解。

大家常境遇一些有关“遮罩”的课程讲的是用一个反革命的近乎矢量图形遮罩在青莲上等等,那些规律基本跟“clip”一样,看上去两者有点迷惑。

梯形

选取伪成分加旋转透视完成梯形:

 .trapezoid{
    position: relative;
    width: 60px;
    padding: 60px;
}

.trapezoid::before{
    content:"";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: perspective(20px) scaleY(1.3) rotateX(5deg);
    transform-origin: bottom;
    background: yellowgreen;
}

理所当然,还有另一种更简明的艺术是采用border达成,借助地点的构造三角形的不二法门,在矩形两侧构造多个透明的三角形:

.trapezoid {
    position: relative;
    width: 60px;
    border-top: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

澳门葡京 12

至于小编:古鲁伊

澳门葡京 13

立志做一名有格调的先后媛

个人主页 ·
我的篇章 ·
34

澳门葡京 14

clip-path语法

W3C官方正式提供的clip-path语法:

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

其默认值是none。另外简单介绍clip-path几个属性值:
  • clip-source:
    可以是内、外部的SVG的<clipPath>元素的URL引用
  • basic-shape:
    使用一些着力的形状函数创立的一个形态。主要不外乎circle()ellipse()inset()polygon()。具体的求证可以看CSS
    Shapes中有关于表达。别的在CSS
    Shapes
    101一文中也有详实介绍。
  • geometry-box:
    是可选参数。此参数和basic-shape函数一起使用时,可以为basic-shape的剪裁工作提供参考盒子。如果geometry-box由我指定,那么它会利用指定盒子形状作为裁剪的门道,包含其他(由border-radius提供的)的角的模样。

● 被屏弃的“clip”

五边形

梯形加上三角形,很不难就组合成一个五边形,那里需求依靠一个伪成分达成:

.pentagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent; 
}

.pentagon::before {
    content:"";
    position: absolute;
    top: 60px;
    left: -40px;
    border-top: 60px solid yellowgreen;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

澳门葡京 15

起来选用clip-path

在初叶应用clip-path制图图形,恐怕说裁剪图形以前,有两点需求大家只顾:

  • 使用clip-path要从同一个方向绘制,假诺顺时针绘制就一律顺时针,逆时针就一律逆时针,因为polygon是一个一而再线段,若线段相互有交集,裁剪区域就会有相减的场馆时有爆发,当然如若你尤其需求这么的效劳除外。
  • 一经绘制时使用比例的措施绘制,长宽就务须求事先设定,不然有大概绘制出来的长宽和大家想像的就会有差异,使用像素绘制就不会有诸如此类的地方。

先来看一个应用polygon()函数绘制的以身作则:

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

那段代码会将有所的图样裁剪为菱形。可是怎么图片会被裁剪为菱形而不是梯形或平行四边形之类的啊?那第一在于函数顶点的值。下图将证美素佳儿(Karicare)切:

澳门葡京 16

 

 

各样点的首先个坐标值决定了它在 x 轴上的地点,第一个坐标值指定了它在 y 轴的职位,所有点是顺时针绘制的。比如菱形最右侧的点,它坐落 y 轴下方一半处,所以它的 y 坐标是 50%。同时这几个点位于 x 轴的最左侧,所以它的 x 坐标是 100%。此外点的坐标总而言之。

终极效果如下所示:

澳门葡京 17澳门葡京 18

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Clip path</title>
  6     <style type="text/css">
  7         body {
  8             margin: 20px auto;
  9             text-align: center;
 10             font-family: 'Lato';
 11             max-width: 640px;
 12         }
 13 
 14         h1 {
 15             margin-bottom: 100px;
 16             font-size: 1.8em;
 17         }
 18 
 19         div {
 20             display: inline-block;
 21             margin: 50px 0px;
 22             width: 250px;
 23             height: 250px;
 24             border-radius: 200px;
 25             filter: grayscale(0.9);
 26             cursor: pointer;
 27         }
 28 
 29         div:hover {
 30             filter: none;
 31         }
 32 
 33         div:hover .text {
 34             opacity: 1;
 35         }
 36 
 37         .text {
 38             position: absolute;
 39             background: rgba(200, 0, 0, 0.5);
 40             padding: 20px 0;
 41             top: 90px;
 42             width: 250px;
 43             opacity: 0;
 44             text-align: center;
 45             color: white;
 46             font-size: 1.4em;
 47         }
 48 
 49         .left .text {
 50             background: rgba(0, 0, 200, .5);
 51         }
 52 
 53         .right .text {
 54             background: rgba(200, 100, 0, 0.5);
 55         }
 56 
 57         .bottom .text {
 58             background: rgba(0, 200, 0, 0.5);
 59         }
 60 
 61         .top {
 62             background: url('http://t.imgbox.com/KXaGvTFB.jpg');
 63             clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 64             background-size: contain;
 65             position: relative;
 66             left: -125px;
 67             top: -130px;
 68         }
 69 
 70         .left {
 71             background: url('http://t.imgbox.com/LHPFYSYE.jpg');
 72             clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 73             background-size: contain;
 74             position: relative;
 75         }
 76 
 77         .right {
 78             background: url('http://t.imgbox.com/tlgvPjwn.jpg');
 79             clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 80             background-size: contain;
 81             position: relative;
 82             top: -352px;
 83             left: 256px;
 84         }
 85 
 86         .bottom {
 87             background: url('http://t.imgbox.com/R7h6VtZr.jpg');
 88             clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 89             background-size: contain;
 90             position: relative;
 91             top: -220px;
 92             left: -126px;
 93         }
 94     </style>
 95 </head>
 96 <body>
 97 <h1>Images clipped with <code>clip-path</code> Property</h1>
 98 <div class="left"><p class="text">SPORTS</p></div>
 99 <div class="top"><p class="text">TECHNOLOGY</p></div>
100 <div class="right"><p class="text">FOOD</p></div>
101 <div class="bottom"><p class="text">NATURE</p></div>
102 </body>
103 </html>

View Code

成效图如下:

澳门葡京 19

 

 

回想在此之前CSS绘制图形必须束手束脚,而且还得想法设法,使用clip-path绘图什么六边形、八边形、五角形、心形等,都不再是难点了。OXXO.STUDIO有一篇小说《運用
clip-path 的純 CSS
形狀變換》详细介绍了那个图片是什么绘制的。当然除此之外,在线的CSS
clip-path
maker提供了累累不平整的图形案例:

“剪切”第三遍面世在CSS里(此处不一致于overflow:hidden的意义)是当做clip属性。

六边形

看看上边的梯形,假诺五个反方向且底边同样大小的梯形,叠加在一起,是否就能得到一个六边形呢?

.pentagon {
    position: relative;
    width: 60px;
    border-bottom: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}
.pentagon::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 0px;
    top: 60px;
    left: -40px;
    border-top: 60px solid yellowgreen;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
}

澳门葡京 20

运用 geometry-box 裁剪成分

在切切实实运用geometry-box来裁剪成分在此之前,对geometry-box做一下有关的打听。

geometry-box可以是shape-boxfillstroke或者view-box。其中shape-box接纳于HTML成分,它具备各类值:margin-boxborder-boxpadding-boxcontent-box

澳门葡京 21

来看个大约的以身作则:

 

澳门葡京 22澳门葡京 23

.clip-me {
    clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
    margin: 10%;
}

View Code

在上例中,成分的 margin-box 会作为参考,来支配裁剪点的骨子里地点。点(10%,10%)是 margin-box 的左上角,所以clip-path 的一向会基于此点举办总计。

其实shape-box和CSS
Shapes中的引用框概念丰富类似,有至于那下边的牵线,可以花点时间阅读《接头CSS
Shapes的引用框》一文。

如果geometry-boxbasic-shape一头使用,可以引用basic-shape提供的引用框。其意义和shape-outside属性类似,更加多的细节可以看看shape-outside的个性介绍。

如果geometry-box由本身指定,那么它会使用指定盒子形状作为裁剪的不二法门,包含其余(由border-radius提供的)的角的形制。

除了shape-box值,还足以接纳SVG成分上,它有着此外三个值:fillstrokeview-box

例如:

八边形

六边形都消除了,八边形也不在话下,一个矩形加上七个梯形,可以合成一个八边形。

.octagon {
    position: relative;
    width: 40px;
    height: 100px;
    background: yellowgreen;
}
.octagon::before {
    content: "";
    height: 60px;
    position: absolute;
    top: 0;
    left: 40px;
    border-left: 30px solid yellowgreen;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.octagon::after {
    content: "";
    height: 60px;
    position: absolute;
    top: 0;
    left: -30px;
    border-right: 30px solid yellowgreen;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

澳门葡京 24

clipPath 和clip-path

在SVG中有一个clipPath元素。<clipPath>要素不会平昔在页面上显现,他唯一的成效就是可以透过clip-path来引用。它和CSS的clip-path只怕有很大的分歧。有关于两者的详实介绍可以阅读《CSS和SVG中的剪切:clip-path属性和<clipPath>元素》一文。

而不少时候两边可以整合一起利用。

你不要求在CSS中定义clip-path的值,因为它亦可引用SVG中定义的 <clipPath>标签成分。下边是它的行使示例:

HTML

澳门葡京 25澳门葡京 26

 1 <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="澳门葡京 27" class="clip-svg">
 2 
 3 <svg width="0" height="0">
 4   <defs>
 5     <clipPath id="myClip">
 6       <circle cx="100" cy="100" r="40"/>
 7       <circle cx="60" cy="60" r="40"/>
 8     </clipPath>
 9   </defs>
10 </svg>

View Code

CSS

澳门葡京 28澳门葡京 29

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

View Code

职能如下图

澳门葡京 30

.element{clip:rect(10px, 20px, 30px, 40px);}

五角星

好的,探索完多边形,我们继承深究X角星。

先来看望五角星,要怎么落到实处吗?当然是直接打出来啦 — ★☆

澳门葡京 31

开个笑话,那里运用 3 个三角形叠加旋转在一齐已毕。

.star {
   margin: 50px 0;
   position: relative;
   width: 0;
   border-right: 100px solid transparent;
   border-bottom: 70px  solid yellowgreen;
   border-left: 100px solid transparent;
   transform: rotate(35deg) scale(.6);
}
.star:before {
    content: '';
    position: absolute;
    border-bottom: 80px solid yellowgreen;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    top: -45px;
    left: -65px;
    transform: rotate(-35deg);
}
.star:after {
    content: '';
    position: absolute;
    top: 3px;
    left: -105px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid yellowgreen;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);
}

澳门葡京 32

clip-path和masking

剪裁和遮罩都是用来隐藏成分的一对片段、呈现其余一些的。当然了,那三头如故有分其他。差别主要在于这几方面:他们能做的东西,不一样的语法,涉及到的不比技术,是新的仍然旧的,以及浏览器协理的反差。

两岸最关键的分别:遮罩使用的是图像,剪裁使用的是路线

想象一张从左到右、从黑到白渐变的正方形图像,它可以是一个遮罩。对于利用了那么些渐变遮罩图像的因素,它在遮罩图像的海螺红部分是晶莹(透视)的,而在遮罩图像的黄色的有的是不透明(正常)的。所以作出的结论是:那几个成分是从左到右淡入的。

而剪裁平素都是矢量路径的。路径之外的有些是透明的,路径里边的有些是不透明的。

个人觉得有点杂乱。因为众多时候大概会遇见某个关于遮罩的科目用的是一个在水草绿上有橙褐矢量形状的遮罩图像,那和剪裁基本是同一个法则。但这还好,它只是颠倒是非了一点东西。

有关于两者相关的事无巨细介绍可以点击那里阅读。

此间多少个值的相继和margin/padding一样,10px从要素顶端发轫……以此类推“上右下左”。

六角星

六角星呢?想象一下,一个升高的三角 ▲,叠加上一个向下的三角形
▼,就能够博得一个六边形:

.sixstar {
    position: relative;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid yellowgreen;
}
.sixstar:after {
    content: "";
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid yellowgreen;
    top: 30px;
    left: -50px;
}

澳门葡京 33

clip-path和CSS Shapes

澳门葡京 ,前方已经数次涉及CSS Shapes了,是的,因为CSS
Shapes可以扶助大家打破常规则的Web排版,让Web页面可以像媒体杂志一如既往布局,那将是欢娱的一件工作。

而在CSS Shapes中一样会有clip-path的身影。

clip-path接收与basic-shape平等的形制函数和值(前面提到过)。倘诺大家定义相同的多头形形状,同时用于shape-outsideclip-path性情上,它将炒鱿鱼图像上您定义的形象之外的图像。

 

澳门葡京 34澳门葡京 35

1 img.right {
2     float: right;
3     height: 100vh;
4     width: calc(100vh + 100vh/4);
5     shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
6     /* clip the image to the defined shape */
7     clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
8 }

View Code

结果如下:

澳门葡京 36

下边有个示范

HTML

澳门葡京 37澳门葡京 38

 1 <div class="container">
 2   <div class="element">
 3   </div>
 4   <h1>Cupcakes Recipe</h1>
 5   <p>
 6     Cupcake ipsum dolor sit. Amet sweet roll sweet roll cheesecake sweet roll apple pie ice cream. Toffee soufflé danish soufflé I love I love dessert I love. Lollipop carrot cake marshmallow I love caramels. Chocolate cotton candy unerdwear.com dessert gingerbread gummies I love. Bonbon chupa chups biscuit danish apple pie. Bonbon muffin dessert wafer chocolate cake sesame snaps candy canes marzipan.
 7   </p>
 8   <h3>Ingredients</h3>
 9   <ul>
10     <li>1/2 Lorem Ipsum</li>
11     <li>5g Sugar Ipsum</li>
12     <li>2 eggs</li>
13   </ul>
14   <p>
15     Dessert oat cake candy lollipop topping cotton candy jelly beans I love cake. Brownie sugar plum cotton candy wafer dragée pudding I love. I love I love chocolate. Topping danish carrot cake soufflé liquorice icing gummi bears liquorice dessert. Jujubes oat cake tootsie roll tart. 
16   </p>
17   <p>
18     Cookie lollipop cookie gingerbread danish muffin sweet chupa chups. Gingerbread donut muffin biscuit sesame snaps chocolate cake sweet. Sugar plum lemon drops pastry tiramisu chocolate gingerbread. I love pudding biscuit soufflé wafer biscuit.
19   </p>
20   <div class="clear"></div>
21 </div>

View Code

CSS

澳门葡京 39澳门葡京 40

 1 * {
 2   margin: 0;
 3   padding: 0;
 4   box-sizing: border-box;
 5 }
 6 
 7 body {
 8   color: #555;
 9   font-size: 0.95em;
10   background-color: #eee;
11   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
12 }
13 
14 .container {
15   width: 100%;
16   max-width: 1200px;
17   margin: 20px auto;
18   background-color: white;
19 }
20 
21 .element {
22   width: 40%;
23   height: 600px;
24   float: left;
25   background-image: url(http://tympanus.net/codrops-playground/assetsssref/properties/clip-path/cupcakes.jpg);
26   background-size: cover;
27   background-position: -100px 0;
28   background-repeat: no-repeat;
29   -webkit-clip-path: ellipse(90% 70% at 0% 50%);
30   clip-path: ellipse(90% 70% at 0% 50%);
31   -webkit-shape-outside: ellipse(90% 70% at 0% 50%);
32   shape-outside: ellipse(90% 70% at 0% 50%);
33   -webkit-shape-margin: 2em;
34   shape-margin: 2em;
35 }
36 
37 p,
38 h1,
39 h3 {
40   padding: 1em 0;
41 }
42 
43 p {
44   margin-right: 4em;
45 }
46 
47 ul {
48   list-style: circle;
49 }

View Code

 

效果图如下

 澳门葡京 41

 

 

不过“clip”属性已经被CSS标准弃用,这意味它曾经不被推举应用,因为浏览器产商们早已竭尽全力的在针对新的正经做立异。

八角星

八角星呢?三个角那么多吧。其实使用七个矩形进行旋转拼接就足以了。

.eightstar {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    transform: rotate(30deg);
}

.eightstar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    background-color: yellowgreen;
}

澳门葡京 42

clip-path示例和工具

面前内容大致的涉及过了,clip-path是一个强有力的性质,除了自己能完毕部分特殊效果之外,还足以和SVG结合在同步。别的还是可以和Masking以及CSS
Shapes在一块,做出大家意想不到的效应。那么关于于clip-path连带的案例,网上一度有大把了。除此之外,clip-path还有局地在线的工具,可以一向援救大家做一些业务。比如Chrome插件CSS
Shapes
编辑器、Clip
Path生成器和CSS clip-path
Maker: Clippy。

末尾强列提议大家收藏好上面那篇小说,因为那篇小说整理了18个关于于clip-path的课程、案例和工具:

 

 澳门葡京 43

●新的“剪切”属性:clip-path

十二角星

好。最终多角星再来一个十二级角星。在八角星的底蕴上,再追加一个矩形,就能赢得十二角啦。相当于要过第三个伪成分。

.twelvestar {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 100px!important;
    background-color: yellowgreen;
    transform: rotate(30deg);
}

.twelvestar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(30deg);
    background-color: yellowgreen;
}

.twelvestar::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    transform: rotate(60deg);
    background-color: yellowgreen;
}

澳门葡京 44

参考资料

  • W3C官方正规
  • clip-path(WBP)
  • clip-path(CSS
    Reference)
  • Introducing the CSS clip-path
    Property

新应用于成分“剪切 ”的习性推荐用clip-path, 你只怕会觉得它是这么写的:

椭圆

终极,再来使用传统的法子画一个椭圆,过去 CSS3 画椭圆,基本上只可以正视border 已毕。

此处运用 border 画一个蛋的形态:

.ellipse {
   width: 120px;
   height: 160px;
   background-color: yellowgreen;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

澳门葡京 45

CodePen — CSS Shapes(CSS
几何图形)

地点所描述的是应用传统 CSS3
的方法绘制几何图形,前人栽树后人乘凉,在此之前的大牛们在 CSS
绘制几何图形上早已做了丰富深入的钻研,越来越多的 CSS
图形你可以戳那里:The Shapes of
CSS 。接下来大家将要了然部分更高级的绘图几何图形的不二法门。

设若您看到了此间,恭喜你,本文的正文从此处先导。

澳门葡京 46

  

总结

正文介绍了有关 clip-path 的着力内容,可以协理您入门。学习运用这么些天性并不会费用太多的岁月,不过制造性的接纳就须求多多磨练了。当浏览器广泛接济此属性时,你就足以应用 clip-path创造出酷炫的职能了。

 

.element{

clip-path

CSS
新属性 clip-path,意味裁剪路径的趣味,让我们得以很便利的更动种种几何图形。

clip-path 通过定义特殊的门径,完结大家想要的图纸。而以此路子,正是 SVG
中的 path 。

探访它的 API:

{
/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
}

看上去很多,其实很好明白,若是接触过 SVG 的 path,其实就是照搬 SVG 的
path 的片段定义。换言之,倘若没有接触过 SVG,看完本文后再去上学 SVG 路径
,也会那几个便于上手。

依据不一样的语法,咱们可以转移差距的图纸。

例如 clip-path: circle(50px at 50px 50px) 表示在要素的 (50px,
50px)处,裁剪生成一个半径为 50px 的圆。

以成分的左上角为坐标起源

而整个 clip-path 属性,最为根本的当属 polygon,可以运用 polygon 生成自由多边形。

/* 错误的演示 */

 

clip-path:rect(10px, 20px, 30px, 40px);

clip-path 示例

上边分别点数使用 clip-path 生成一个圆形和一个十边形。

/* 圆形 */
.circle {
  width: 100px;
  height: 100px;
  background-color: yellowgreen; 
  clip-path: circle(50px at 50px 50px);
}

/* 十边形 */
.polygon {
  width: 100px;
  height: 100px;
  background-color: yellowgreen; 
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

澳门葡京 47

clip-path: circle(50px at 50px 50px) 上文也讲了,表示在要素的 (50px,
50px)处,裁剪生成一个半径为 50px 的圆。

而在 clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%) 中,依次列出了
10 个坐标点。大家的图纸就是各种连接这 10 个坐标点形成一个裁切图形。

理所当然,那里运用的是比例,也得以使用具体的数值。

}

 

实际大家并从未成功获取到rectangle()那么些措施,即便加了前缀也是聊以自慰。据悉rectangle()方法将会推迟到下一个本子。若是我们想剪切一个矩形可以用inset()方法:

clip-path 动画

clip-path 此外一个强有力之处在于可以举行 CSS transtion 与 CSS
animation,相当于过渡和卡通。

看一个多边形的连片切换动画。

澳门葡京 48

CodePen Demo — Clip-path
多边形过渡动画

.element{

图表变换动画

除开,我们还能尝试,将一个整机的图纸,分割成三个小图形,那也是 clip-path 的吸引力所在,纯
CSS 的图片变换:

澳门葡京 49

CodePen Demo — Clip-path
triangle2rect

/*
也可以安装一个值表示周围都一律,恐怕设置七个代表水平和垂直八个趋势,多个值表示上下水平
*/

clip-path:inset(10px 20px 30px 40px);

 

}

clip-path 动画的受制

clip-path
动画就算美好,但是存在必然的局限性,那就是开展连接的八个状态,坐标顶点的数据必须一律。

相当于一旦自个儿梦想从三角形过渡到矩形。假诺三角形和矩形的 clip-path 分别为:

  • 三角形:clip-path: polygon(50% 0, 0 100%, 100% 0)
  • 矩形: clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)

拓展交接动画时候,直接从 polygon(50% 0, 0 100%, 100% 0) –> polygon(0 0, 100% 0, 100% 100%, 0 100%) 是不行的,因为是从
3 个坐标点变换来 4 个坐标点。

为此那里要求那用一个得益的格局,在三角的表示方法中,使用五个坐标点表示,其中七个坐标点举行重合即可。相当于:

  • 三角形:clip-path: polygon(50% 0, 0 100%, 100% 0) -> clip-path: polygon(50% 0, 50% 0, 0 100%, 100% 0)

应留神的是此处并没有逗号,语法是见仁见智的,可是最终的职能是一律的。我们一致也足以用clip-path来完结圆形、椭圆和多边形。

 

例如:

N边形过渡动画

假设脑洞够大,随机生成 N(N>=1000)边形,举行转移,会是怎么着成效呢?

see one see:

澳门葡京 50

CodePen Demo —
2000边形过渡动画

更换的一弹指很有爆炸的痛感。可是那里有个很大的标题,只是随便生成了 2000
个坐标点,然后选拔 clip-path 将那个坐标点连接起来,并不是符合要求的多边形。

在 VUE官网,有下边那样一个事例,一个规则的绝半数以上形举办持续的接入动画,卓殊酷炫:

澳门葡京 51

VUE官网使用的是 SVG 完毕的,那里本人有点改变了下,使用
CSS clip-path 实现:

CodePen Demo — clip-path N
polygon ,感兴趣可以看看。

.clip-circle{

 

 

clip-path:circle(60px at center);

shape-outside

终极再来看看 shape-outside,其它一个好玩的有力量转变几何图形的性质。

shape-outside 是吗?它也有制作各类几何图形的力量,可是它只好和浮动 float 一起利用。

虽说应用上保有限制,不过它赋予了俺们一种尤其自由的图文混排的力量。

先看看它的 API,看上去貌似很复杂:

{
    /* Keyword values */
    shape-outside: none;
    shape-outside: margin-box;
    shape-outside: content-box;
    shape-outside: border-box;
    shape-outside: padding-box;

    /* Function values */
    shape-outside: circle();
    shape-outside: ellipse();
    shape-outside: inset(10px 10px 10px 10px);
    shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

    /* <url> value */
    shape-outside: url(image.png);

    /* Gradient value */
    shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

    /* Global values */
    shape-outside: initial;
    shape-outside: inherit;
    shape-outside: unset;
}

不过,其实它和 clip-path 的语法卓殊类似,很不难触类旁通。看看实例,更易精晓:

世家自行去纯熟下 API,接着假如我们有下边那样的结构存在:

<div class="container">
    <div class="shape-outside">
      <img src="image.png">
    </div>
    xxxxxxxxxxx,文字描述,xxxxxxxxx
</div>

概念如下 CSS:

.shape-outside {
    width: 160px;
    height: 160px;
    shape-outside: circle(80px at 80px 80px);
    float: left;
}

注意,上面 .shape-outside 使用了变化,并且定义了 shape-outside: circle(80px at 80px 80px) ,表示在要素的
(80px, 80px) 坐标处,生成一个 80px 半径的圆。

如此,将会时有发生一种图文混排的效应:

澳门葡京 52

CodePen Demo — 图文混排
shape-outside

啊?好像没什么了不起啊?那不就是 float 的作用呢?

不,不是的,看看 float 和 加上shape-outside 后的相持统一:

澳门葡京 53

看看差别了呢?使用了 shape-outside ,真正的落成了文字依据图片的概貌,在其周围排列。

澳门葡京 54

上图是选取开发者工具选取了效果了 shape-outside 的元素,可以观看,使用了出格的浅蓝去标记几何图形的概貌。在那么些油红区域之外,文字都将能够展开排列。

}

 

.clip-ellipse{

shape-outside 的本质

划重点,划重点,划重点。

所以,shape-outside 的本质实际上是生成几何图形,并且裁剪掉其几何图形之外周围的区域,让文字能排列在那些被裁剪区域之内。

所以,精通了那一个精神之后,大家再看看一些更扑朔迷离的图文混排。

clip-path:ellipse(60px 40px at 75px 30px);

平行四边形

澳门葡京 55

CodePen Demo — 图文混排
shape-outside

}

心形、菱形

澳门葡京 56

CodePen Demo — 图文混排
shape-outside

.clip-polygon{

 

clip-path:polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%,
0% 75%);

clip-path 与 shape-outside 的包容性

额,相比较遗憾,那七天天性的包容性近日仍处于比较为难的境地。感兴趣的可以看看
CANIUSE 。周全同盟使用仍需努力。

据此本文所出示的 Demo 都以在 -webkit- 内核浏览器下形成的。

 

}

最后

一种类 CSS 文章汇总在本身的 Github 。

到此本文为止,如果还有哪些疑点照旧提议,可以多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

澳门葡京 57

效果

多方形方法突显的很是强劲。

这边强烈推荐一个小工具——Clippy,可以用它来生成许多形状。

澳门葡京 58

Clippy

●运用clip-path定义一个SVG的

你也得以不用定义clip-path的值,利用SVG引用,也足以达成,例如:

html:

澳门葡京 59

html

CSS:

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

澳门葡京 60

效果

● clip-path的变形和动画片

当你早已用clip-path剪切了一个为主造型,之后我们可以让它动起来。

html:

澳门葡京 61

html

CSS:

.clip-animation{animation: clip1sinfinite}@keyframesclip {    

0% {-webkit-clip-path:polygon(100% 50%, 84.70057014808336%
54.5684167277018%, 91.0518476172854% 60.99980941685713%, ……   }  

 50% {-webkit-clip-path:polygon(84.70057014808336% 54.5684167277018%,
91.0518476172854% 60.99980941685713%, ……}

100% {-webkit-clip-path:polygon(91.0518476172854% 60.99980941685713%,
82.33578363789503% 63.39392013277814%,……}

}

澳门葡京 62

效果

● 遮罩

面前有涉及过,mask的使用和photoshop里的遮罩很类似。今后也足以不须要用真实的位图来定以一个遮罩层。可以用-webkit-gradient来顶替。

例如:

.mask-gradient{

width:150px;

-webkit-mask-image:-webkit-gradient(    linear, left top, right bottom, 
  

color-stop(0.00,  rgba(0,0,0,1)),

color-stop(0.25,  rgba(0,0,0,1)),

color-stop(0.50,  rgba(0,0,0,0)),

color-stop(0.65,  rgba(0,0,0,0)),

color-stop(1.00,  rgba(0,0,0,0)));

}

澳门葡京 63

效果

也有用SVG来定义滤镜和形制来做遮罩效果,将图纸放入SVG标签内部。

但在CSS中用ID只怕URL应用到HTML中的方法近期一般唯有火狐浏览器协理。

SVG

澳门葡京 64

SVG

澳门葡京 65

效果

● 边缘遮罩

那几个法子有些类似于border-image的用法。定义一个SVG图形,然后利用“九宫格”的原理,多少个角不变边缘“平铺”或“拉伸
”。

澳门葡京 66

模板

.svg-border-mask{

-webkit-mask-box-image:url(mask.png)30repeat;

mask-border:url(stamp.svg)30repeat;

}

澳门葡京 67

效果

至于浏览的支撑很难不难的做总括,因为不一样的性情和值对浏览器有两样的支持程度。更别说在哪方面用,怎么着去用。所以我提出渐进增强地动用即时你以为最好的章程。就算相比不方便,甚至不曾工具得以去测试那个是或不是真正可行。

有关加前缀:使用-webkit-前缀,可能不选择,大概都适用一大半浏览器。

澳门葡京 68

WeChat 欢迎沟通

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website