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属性共 ...
随机推荐
- Unity 使用JIMO 做MR扫图（Vuforia） 优化
最近在做一个用MR眼镜端扫描图片做定位用, 使用的Vuforia提供的图片识别功能. 在眼镜端因为摄像机很挫,导致扫描出来的图片 位置存在着一定的偏差.就做了个小优化. 1.扫图的角度设定,垂直于图片 ...
- 如何修改Mac文件默认打开方式？
熟悉Mac电脑的用户都知道,在 OS X 中,Finder 存储的文件总会以指定的某个默认应用程序打开,比如图片类型的文件默认以「预览」打开.但由于经常需要使用图片编辑工具 PS打开图片类型的文件,每 ...
- Elasticsearch Windows版安装配置
Elasticsearch简介 Elasticsearch是一个开源的搜索文献的引擎,大概含义就是你通过Rest请求告诉它关键字,他给你返回对应的内容,就这么简单. Elasticsearch封装了L ...
- vector 用法2
vector 是向量类型,它可以容纳许多类型的数据,如若干个整数,所以称其为容器.vector 是C++ STL的一个重要成员,使用它时需要包含头文件: 复制代码 代码如下: #include< ...
- 使用excel生成多条sql语句
前提: excel 表里有2列数据,现在要每一列 生成一个sql 语句,应用自定义字符 在第三行单元格里面写入:="zdy"&A2&"zdy"& ...
- Mardown学习
Mardown学习 标题: 一级标题:'#'+'空格'+'标题名字'+'回车' 二级标题:'##'+'空格'+'标题名字'+'回车' 三级标题:'###'+'空格'+'标题名字'+'回车' 四级标题: ...
- css 径向渐变实现渐变小圈
效果如下图: 代码如下: .b-list .ceil .line { height: 20px; width: 100%; margin: 0 auto; background: radial-gra ...
- gets,fgets,getchar,fgetc
以上四个函数都是读取外部输入的函数.可以使stdin,也可以是文件.以下都是在C语言中的应用 关于gets和fgets都能够读取一行,一行结束的标志是"回车".都有弊端gets(s ...
- 【Delphi11】「Embarcadero.Delphi.11.0.v28.0.42600.6491.Lite.v17.0分享」
[Delphi11]转存或下载后将后缀名".exe"删除即可,或者直接右击解压缩也可.「Embarcadero.Delphi.11.0.v28.0.42600.6491.Lite. ...
- 在 Linux 上使用《算法》第4版官网中的 algs4.jar 包
使用<算法>第4版( Algorithms Fourth Edition ) 中的 algs4.jar 包 下载 algs4.jar 官网网址: https://algs4.cs.prin ...