前端 CSS 经典:clip、clip-path

简介: 前端 CSS 经典:clip、clip-path

1. clip

1.1 clip: auto | inherit | rect

auto:默认,不裁剪

inherit:继承父级 clip 属性

rect:规则四边形裁剪

1.2 clip: rect(top, right, bottom, left)

注意:

1.裁剪只对 fixed 和 absolute 的元素有效。

2.top,right,bottom,left 都是相对于元素的左上角。

/* 裁剪的位置由 top,left 决定,裁剪的宽由 right - left 决定,裁剪的高由 bottom - top决定 */
/* 例:裁剪一个距离左上角10px的宽200px,高200px的长方形视口 */
div {
  clip: rect(10px, 210px, 210px, 10px);
}

2. clip-path

2.1 clip-path: shape | source

shape 基础形状:inset 矩形,circle 圆,ellipse 椭圆,polygon 多边形

source SVG 绘制图形: path

2.2 例子

注意:

1.裁剪只对 fixed 和 absolute 的元素有效。

2.top,right,bottom,left 相对于元素的各边界。

.box {
  /* inset 矩形:inset(top,right,bottom,left,round radius)*/
  clip-path: inset(10px 10px 10px 10px round 10px);
  /* circle 圆:circle(radius, at position)*/
  clip-path: circle(100px at 50px 100px);
  /* ellipse 椭圆:ellipse( radius-x, radius-y, at position )*/
  clip-path: ellipse(100px 50px at 50px 100px);
  /* polygon 多边形:polygon(left top, left top, left top)*/
  clip-path: polygon(50% 0%, 100% 100%, 0 100%);
 
  /* path SVG:path 绘制图形 */
  clip-path: path("M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 100 100 z");
}

 

 


目录
相关文章
|
7天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
7天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
16天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
1天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
4天前
|
前端开发 UED
CSS clip-path 属性
CSS clip-path 属性
12 0
|
27天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
17 0
|
1月前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
32 0
|
1月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
21 0
|
1月前
|
前端开发
前端 CSS 经典:模特换装效果
前端 CSS 经典:模特换装效果
43 0
|
1月前
|
前端开发 算法
前端 CSS 经典:filter 滤镜
前端 CSS 经典:filter 滤镜
29 0

热门文章

最新文章