zoukankan html css js c++ java

css clip-path

1.背景

clip-path是由clip演化而来的样式属性，表示裁剪元素的一部分来显示，其余部分隐藏。顾名思义clip-path着重于path路径。

2.使用场景

最先想到的场景就是登录某平台后显示的头像框，比如圆形的，就是将方形的头像裁剪出圆形来显示。其次就是用于绘制图形，比如一个红色的正方形等。或者绘制不规则图形，以及显示图形的不规则的一部分。

通常用法就是结合背景色或背景图片，来进行裁剪

3.语法

基本语法：<clip-source> | [ <basic-shape> || <geometry-box> ] | none

/属性说明/
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

basic-shape有4种，分别是矩形，圆形，椭圆，多边形。

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

//示例
     clip-path: inset(2em 3em 2em 1em round 2em);

circle()可以传人2个可选参数；
1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比
2. 圆心位置，默认为元素中心点
//半径公式
如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比 

//示例
clip-path: circle(30% at 150px 120px);

ellipse()可以传人3个可选参数；
1. 椭圆的X轴半径，默认是宽度的一半，支持百分比
2. 椭圆的Y轴半径，默认是高度的一半，支持百分比
3. 椭圆中心位置，默认是元素的中心点

//示例
clip-path: ellipse(45% 30% at 50% 50%);

//语法
polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
//说明
<fill-rule>可选，表示填充规则用来确定该多边形的内部。可能的值有nonzero和evenodd,默认值是nonzero
后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点

//示例
clip-path: polygon(50% 0,100% 50%,0 100%);

polygon可以有理论上无数多个点。一个可以方便取点坐标的网站：
http://betravis.github.io/shape-tools/polygon-drawing/


还可以结合动画，比如

.clip-path2{
        transition: 0.4s cubic-bezier(1, -1, 0, 2);
        clip-path: circle(30% at 200px 100px)
    }
  .clip-path2:hover{
        clip-path: circle(20% at 200px 100px)
    }

4.示例

这里做一个9宫格，然后将中间格子与其他格子连线。上下左右可以直接用横向和纵向的直线，但是四个角的连线就需要用斜线。这里可以用clip-path来画斜线。这里例子中使用了另一种画斜线的方法，但是需要旋转角度确定才可以，相对来说clip-path可以结合百分比更方便。代码如下：

  1 <html>
  2     <head>
  3         <style>
  4         .box {
  5             width: 100%;
  6             height: 100%;
  7             position: relative;
  8         }
  9         .box div {
 10             box-sizing: border-box;
 11         }
 12         .flex-sp-b {
 13             display: flex;
 14             justify-content: space-between;
 15         }
 16         .flex-c {
 17             flex-direction: column;
 18         }
 19         .flex-r {
 20             flex-direction: row;
 21         }
 22         .union {
 23             width: 22%;
 24         }
 25         .cell {
 26             height: 22%;
 27             border: 1px solid #348efd;
 28             display: flex;
 29             justify-content: center;
 30             align-items: center;
 31         }
 32         .lines {
 33             position: absolute;
 34         }
 35         .line {
 36             border: 1px solid #9a9a9a;
 37             position: absolute;
 38         }
 39         .line-single {
 40             width: 17%;
 41             height: 17%;
 42             border: none;
 43         }
 44         .line1 {
 45             left: 22%;
 46             top: 22%;
 47             background: linear-gradient(26deg, transparent 49.5%, #9a9a9a 49.5%, #9a9a9a 51.5%, transparent 51.5%);
 48         }
 49         .line2 {
 50             width: 17%;
 51             height: 0px;
 52             top: 50%;
 53             left: 22%;
 54         }
 55         .line3 {
 56             left: 22%;
 57             top: 61%;
 58             background: linear-gradient(154deg, transparent 49.5%, #9a9a9a 49.5%, #9a9a9a 51.5%, transparent 51.5%);
 59         }
 60         .line4 {
 61             height: 17%;
 62             width: 0px;
 63             left: 50%;
 64             top: 22%;
 65         }
 66         .line6 {
 67             height: 17%;
 68             width: 0px;
 69             left: 50%;
 70             top: 61%;
 71         }
 72         .line7 {
 73             left: 61%;
 74             top: 22%;
 75             background: linear-gradient(154deg, transparent 49.5%, #9a9a9a 49.5%, #9a9a9a 51.5%, transparent 51.5%);
 76         }
 77         .line8 {
 78             width: 17%;
 79             height: 0px;
 80             top: 50%;
 81             left: 61%;
 82         }
 83         .line9 {
 84             left: 61%;
 85             top: 61%;
 86             background: linear-gradient(26deg, transparent 49.5%, #9a9a9a 49.5%, #9a9a9a 51.5%, transparent 51.5%);
 87         }
 88         .line11 {
 89             left: 22%;
 90             top: 22%;
 91             clip-path: polygon(-1% -2%, 102% 99%, 100% 101%, -1% 2%);
 92             background: deeppink;
 93         }
 94         .line33 {
 95             left: 22%;
 96             top: 61%;
 97             clip-path: polygon(-1% 99%, 1% 101%, 101% 1%, 99% -1%);
 98             background: deeppink;
 99         }
100         .line77 {
101             left: 61%;
102             top: 22%;
103             clip-path: polygon(-1% 99%, 1% 101%, 101% 1%, 99% -1%);
104             background: deeppink;
105         }
106         .line99 {
107             left: 61%;
108             top: 61%;
109             clip-path: polygon(-1% -2%, 102% 99%, 100% 101%, -1% 2%);
110             background: deeppink;
111         }
112         h1:after
113   {
114   content:url(beep.wav);
115   }
116         </style>
117     </head>
118     <body>
119         <div class="box flex-sp-b flex-r">
120             <div class="union flex-sp-b flex-c">
121                 <div class="cell">1</div>
122                 <div class="cell">2</div>
123                 <div class="cell">3</div>
124             </div>
125             <div class="union flex-sp-b flex-c">
126                 <div class="cell">4</div>
127                 <div class="cell">5</div>
128                 <div class="cell">6</div>
129             </div>
130             <div class="union flex-sp-b flex-c">
131                 <div class="cell">7</div>
132                 <div class="cell">8</div>
133                 <div class="cell">9</div>
134             </div>
135             <div class="box lines">
136                 <div class="line line1 line-single"></div>
137                 <div class="line line11 line-single"></div>
138                 <div class="line line2"></div>
139                 <div class="line line3 line-single"></div>
140                 <div class="line line33 line-single"></div>
141                 <div class="line line4"></div>
142                 <div class="line line6"></div>
143                 <div class="line line7 line-single"></div>
144                 <div class="line line77 line-single"></div>
145                 <div class="line line8"></div>
146                 <div class="line line9 line-single"></div>
147                 <div class="line line99 line-single"></div>
148             </div>
149         </div>
150     </body>
151 </html>

效果如下：

这里为了对比，将两种斜线都显示了出来，粉红色是clip-path画的，灰色是旋转实现的，宽高变化后，灰色线就对接不到顶点了，但是clip-path的线会随之拉伸。

查看全文

相关阅读:
poj 2488 DFS
畅通工程并查集模版
 KMP 模板
 poj 1426 DFS
poj 2528 线段数
 poj 3468 线段数修改区间（点）
CVPR2012文章阅读（2）A Unified Approach to Salient Object Detection via Low Rank Matrix Recovery
如何制定目标
 Saliency Map 最新综述
 计算机视觉模式识别重要会议杂志

原文地址：https://www.cnblogs.com/ljwsyt/p/12623902.html