CSS clip-path 属性
属性定义及使用说明
clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。
注意： clip-path 属性将替换已弃用的 clip 属性。
| 默认值: | none |
|---|---|
| 继承: | no |
| 动画: | 支持。 |
| 版本: | CSS 屏蔽模块级别 1 |
| JavaScript syntax: | object.style.clipPath="circle(50%)" |
语法
clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| clip-source | 用 URL 表示剪切元素的路径 |
| basic-shape | 将元素裁剪为基本形状：圆形、椭圆形、多边形或插图 |
| margin-box | 使用外边距框作为引用框 |
| border-box | 使用边框作为引用框 |
| padding-box | 使用内边距框作为引用框 |
| content-box | 使用内容框作为引用框 |
| fill-box | 使用对象边界框作为引用框 |
| stroke-box | 使用笔触边界框（stroke bounding box）作为引用框 |
| view-box | 使用最近的 SVG 视口（viewport）作为引用框。 |
| none | 这是默认设置。 没有剪辑 |
| initial | 设置属性为默认值。 |
| inherit | 属性值从父元素继承。 |
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img {
clip-path: circle(50%);
}
</style>
</head>
<body> <h2>clip-path 属性</h2> <img src="https://static.runoob.com/images/mobile-icon.png" width="100" height="100"> </body>
</html>
CSS clip-path 属性的更多相关文章
- css clip样式 属性功能及作用
clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...
- CSS Clip剪切元素动画实例
1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...
- CSS的常用属性
刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS基本属性—文本属性和背景属性
一.CSS常用文本属性 [css中的颜色表示方式] 1.直接使用颜色的单词表示:red.green.blue 2.使用颜色的十六进制表示:#ff0000,#00ff00: 六位数,两两 ...
- CSS之cursor属性
CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...
- CSS中box-sizing属性的理解与部分用法
今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
随机推荐
- 【otter搭建】在Linux下搭建阿里开源otter数据同步平台
一,准备安装包和配置文件 JDK:https://www.oracle.com/technetwork/java/javase/downloads/index.html Zookeeper:https ...
- kubernetes 部署 flannel 网络插件
flannel 的yaml文件 官方网址: https://kubernetes.io/docs/concepts/cluster-administration/addons/ 第一种下载方式:yam ...
- 解决windows的mysql无法启动 服务没有报告任何错误的经验。
解决windows的mysql无法启动 服务没有报告任何错误的经验. 相信很多人都遇到过安装Mysql的时候出现各种各样的问题,教大家解决window下mysql服务没有报告任何错误的情况下无法启动 ...
- 单文件WSDL，非模块化
最近在使用CXF做WebService Sever端,接口与实现类不在一个包下. 实现类如下: 1 @WebService(serviceName = "Demo" 2 , tar ...
- mysql的日期输出格式列出来
mysql的日期输出格式列出来: %a 缩写星期名 %b 缩写月名 %c 月,数值 %D 带有英文前缀的月中的天 %d 月的天,数值(00-31) %e 月的天,数值(0-31) %f 微秒 %H 小 ...
- IDEA配置新学
文件太大导致IDEA不把该文件当成Java类看待 解决方式: 打开本地IDEA的bin目录,找到idea.properties文件,进入进行设置: idea.max.intellisense.file ...
- JDK的安装及卸载
JDK安装及卸载 卸载JDK 删除JAVA安装目录 删除java_home 删除path下关于Java的目录 java-version 查看是否仍能查看 安装JDK 百度搜索JDK8(性能稳定)找到下 ...
- Linux 使用ssh服务管理远程主机
配置网络服务 配置网卡的4种方法: 创建网络会话 RHEL和CentOS系统默认使用NetworkManager来提供网络服务,这是一种动态管理网络配置的守护进程,能够让网络设备保持连接状态.可以使用 ...
- linux Usb serial console
ubuntu Usb serial console 能够把下电时打印输出到串口上,可以记录,而netconsole只能输出下电到disk 之前的打印 Usb串口线,ftdi或pl2303都可以 如果是 ...
- 【peewee】Python使用peewee时where中不同类型比较的问题
问题 以学生表为例,TableStudents表中age字段是TextField类型,想要筛选出18岁以上的学生 TableStudents.select().where(TableStudents. ...