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属性共 ...
随机推荐
- Java数组之数组的使用
数组的使用 普通的for循环 For-Each循环 数组作方法入参 数组作返回值 public class ArrayDemo03 { public static void main(String[] ...
- uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法 简单方便 阿里巴巴图标库:https://www.iconfont.cn/home/index?spm=a313x.7781069.19989 ...
- linux服务器项目迁移非常好用的工具scp和rsync
linux系统下一般都安装了,启用一下就可以了 (1):编辑配置文件 # sudo vi /etc/default/rsync #ubuntu # vi /etc/xinetd.d/rsync #c ...
- Windows MFC HTTP GET请求 函数流程
Windows MFC HTTP GET请求 函数流程 1 CString m_strHttpUrl(_T("http://10.200.80.86:8090/course/upload&q ...
- 2021版idea关于translation插件翻译报错
cn.yiiguxing.plugin.translate.trans.TranslateException: Google 翻译 :: 翻译失败: 未知错误 这是idea拉下来的报错信息,trans ...
- 波利亚(George Pólya)的一些链接
忽然决定还是要写个博客. 第一篇献给波利亚. 他最有名的应该是<怎样解题>(How to solve it)这本书了.我认为只要读了前面几页就能提高普通人解决问题的能力,真的应该列为中学必 ...
- A Super Hero
DP? QwQ这题似乎不能直接贪心2333-- 阶段 很明显的阶段性,\(n\)关便为\(n\)个阶段, 状态 分好阶段后,容易构造出状态的表达: \(f[i,j]\)表示Ma5termind在最开始 ...
- 在unity编辑器中，导出/保存文件，使用EditorUtility.SaveFilePanel，代替运行时的方法。
在项目中(运行时),已经有个功能是导出文件到本地磁盘,使用的方法是常见的DllImport("Comdlg32.dll")并进行封装.详情可参考:https://github.co ...
- 1903021126 申文骏 Java 第六周作业 类与对象
项目 内容 课程班级博客链接 19级信计班(本) 作业要求链接 第六周作业 博客名称 1903021126 申文骏 Java 第六周作业 类与对象 要求 每道题要有题目,代码(使用插入代码,不会 ...
- sql server 01
1. 数据库管理系统(DateBase Management System )DBMS 是专门为管理数据库而设计的一个电脑软件系统 分为两种: (1)关系数据库:建立在关系模型基础上的数据库,比如 S ...