不规则裁剪图片css,使用CSS的clip-path属性实现不规则图形的显示
clip-path
CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
例子
div {
width: 200px;
height: 200px;
background: #6c00af;
-webkit-clip-path: polygon(
28% 6%,
71% 15%,
100% 75%,
18% 39%,
63% 27%,
16% 22%,
65% 19%
);
clip-path: polygon(
28% 6%,
71% 15%,
100% 75%,
18% 39%,
63% 27%,
16% 22%,
65% 19%
);
}
绘制cilp-path神器
语法
/* Keyword values */
clip-path: none;
/* values */
clip-path: url(resources.svg#c1);
/* values */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
/* values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
取值
用 表示剪切元素的路径
一种形状,其大小和位置由值定义。如果没有指定几何框,则边框将用作参考框
如果同 一起声明,它将为基本形状提供相应的参考框盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被 border-radius 定义的剪切路径)。几何框盒可以有以下的值中的一个:
margin-box
使用 margin box 作为引用框。
border-box
使用 border box 作为引用框。
padding-box
使用 padding box 作为引用框。
content-box
使用 content box 作为引用框。
fill-box
利用对象边界框作为引用框。
stroke-box
使用笔触边界框(stroke bounding box)作为引用框
view-box
使用最近的 SVG 视口(viewport)作为引用框。如果 viewBox 属性被指定来为元素创建 SVG 视口,引用框将会被定位在坐标系的原点,引用框位于由 viewBox 属性建立的坐标系的原点,引用框的尺寸用来设置 viewBox 属性的宽高值。
none
不创建的剪切路径。
到此这篇关于使用CSS的clip-path属性实现不规则图形的显示的文章就介绍到这了,更多相关CSS的clip-path不规则图形内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
不规则裁剪图片css,使用CSS的clip-path属性实现不规则图形的显示相关推荐
- html自动裁剪图片宽度,html - CSS显示调整大小和裁剪的图像
html - CSS显示调整大小和裁剪的图像 我想显示具有一定宽度和高度的URL中的图像,即使它具有不同的大小比例.所以我想调整大小(保持比例),然后将图像剪切到我想要的大小. 我可以用html ba ...
- html做图片模糊效果,使用CSS制作跨浏览器的图片模糊效果
在photoshop中,我们要制作一个图片的模糊效果是非常简单的,简单的实用高斯模糊等模糊滤镜就可以完成.现在,我们可以使用CSS和SVG来着网页中实现ps级的模糊效果. 页面中的图片模糊效果不可以滥 ...
- html背景图片只显示一张图片,img只显示图片一部分 或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- html如何把图片在背景图一半,img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- css 设置背景图一半_img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- html悬浮的图片居中,HTML/CSS:图片居中(水平居中和垂直居中)
css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...
- css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...
- html图片分开,webpack单独分离打包css,css里引用的图片路径错误,怎么解决?
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致. 打包前: 从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如 ...
- [css] 使用css将图片转换成黑白的效果
[css] 使用css将图片转换成黑白的效果 filter: saturate(0); 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣 ...
最新文章
- 2022-2028年中国环卫行业产业链深度调研及投资前景预测报告
- python实现D‘Agostino‘s K-squared test正态分布检验
- 业务代码的救星——Java对象转换框架MapStruct
- 408. Valid Word Abbreviation有效的单词缩写
- navicate连接Linux下mysql慢,卡,以及mysql相关查询,授权
- 【Linux就该这么学 20期培训笔记 01】部署虚拟环境安装linux系统
- 计算机组成原理左规右规,计算机组成原理 第四章(严军勇)-2003-2012年.ppt
- 大数据学习笔记55:搭建HBase环境
- 数据结构和算法——八种常用的排序算法----交换排序(冒泡排序和快速排序)
- 输入一个年份,并判断是否为闰年
- Vissim与java(IntelliJ IDEA )联调环境配置
- APKTOOL反编译使用教程
- QPainter基本绘图【1】
- 计算机休眠状态和关,win7系统关于睡眠和休眠这两种状态的区别
- python 小数点位数_python小数位数
- virtualbox 创建桥接网络_VirtualBox 配置虚拟网卡(桥接),实现主机-虚拟机网络互通...
- 移动硬盘插入笔记本会后,右下角有图标显示,但是我的电脑里面不显示,导致打不开硬盘
- java换算当地时间_Java UTC时间与本地时间互相转换
- kubernetes的ingress:Ingress controller,traefik
- 启动Intel TV-x设置
热门文章
- 联想计算机的控制面板在哪,Win10创意者的控制面板在哪?
- windows远程连接服务器并映射端口访问目标服务
- 美国印钱 为什么不会通货膨胀
- 用Python制作可视化GUI界面,一键实现证件照背景颜色的替换
- 瑞萨单片机-硬件I2C从设备
- Couldn‘t store trigger ‘‘ for ‘‘ job:Couldn‘t retrieve job because the BLOB couldn‘t be deserialized
- 【H.264/AVC视频编解码技术详解】二十三、帧间预测编码(1):帧间预测编码的基本原理
- 读取图片文件到剪贴板时的html格式
- 搭建DEM企业管理器
- hdu 4114 Disney's FastPass 状压dp