属性定义及使用说明

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 属性的更多相关文章

  1. css clip样式 属性功能及作用

    clip clip 在学前端的小伙伴前,估计是很少用到的,代码中也是很少看见的,但是,样式中有这样的代码,下面让我们来讲讲他吧! 这个我也做了很久的开发没碰到过这个属性,知道我在一个项目中,有一个功能 ...

  2. CSS样式常用属性整理

    web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...

  3. CSS clip:rect矩形剪裁功能及一些应用介绍

    CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.co ...

  4. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  5. CSS的常用属性

    刚开始学习前段的我,还处于初级阶段,一些东西还是会有搞不明白的时候,还是要大家多多理解.今说就一些关于CSS的常用属性吧! 一.CSS常用选择器 CSS选择器应该说是一个非常重要的工具吧,选择器用得好 ...

  6. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  7. CSS基本属性—文本属性和背景属性

    一.CSS常用文本属性 [css中的颜色表示方式]   1.直接使用颜色的单词表示:red.green.blue    2.使用颜色的十六进制表示:#ff0000,#00ff00:    六位数,两两 ...

  8. CSS之cursor属性

    CSS之cursor属性 今天学习了CSS的cursor属性,第一篇博客就用来总结它吧. cursor属性用于控制光标的显示样式,可取的值有这些: cursor:url()*|{auto|defaul ...

  9. CSS中box-sizing属性的理解与部分用法

    今天看了一些关于box-sizing的一些资料,在这里整理一下,希望也能对大家有所帮助. box-sizing是CSS的一个属性,很好的解决了盒模型的相关问题.CSS中的盒模型(Box model)分 ...

  10. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

随机推荐

  1. Oracle数据泵恢复用户数据实例

    我们测试环境经常会遇到恢复生产数据的情况,我一般比较习惯使用数据泵来搞,这个具体根据自己的业务形态选择适合自己的方式. 此次我们说的是完全恢复用户数据,具体步骤如下: 1.备份数据 expdp tes ...

  2. iOS开发之检测项目是否包含UIWebView

    应苹果审核要求不能包含UIWebView,所以我们上线之前应该扫一下项目是否包含UIWebView 我们直接打开终端 cd 到工程文件下面 执行命令 grep -r UIWebView .  在扫描结 ...

  3. 通过python程序让MySQL利用binlog恢复误操作数据

    MySQL利用binlog恢复误操作数据 在人工手动进行一些数据库写操作的时候(比方说数据订正),尤其是一些不可控的批量更新或删除,通常都建议备份后操作.不过不怕万一,就怕一万,有备无患总是好的.在线 ...

  4. bootstrap-select使用、relation-graph使用

    bootstrap-select 这里要实现的是带有搜索功能的select框, bootstrap 官网没有可以直接拿来用的.如下是官网给出的解释,带搜索功能的select需要自定义. 在网上找到了有 ...

  5. Python冰墩墩（非原创，搬运工）

    import turtle turtle.title('2022北京冬奥会冰墩墩') turtle.speed(10000) # 速度 # 左手 turtle.penup() turtle.goto( ...

  6. canvas 模糊

    让style以50%的效果展示 创建2倍的canvas <!DOCTYPE html> <html> <head> <meta charset="u ...

  7. Vue常用组件,,,持续更新中

    1.vue-lazyload :图片懒加载 2.vue-virtual-scroll-list 和 vue-virtual-scroller: 优化无限列表的场景 3.vue-table-with-t ...

  8. 解决vuex“状态管理声明输错”后报错为："Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor"

    //Vuex index.js 源码 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); import actions fro ...

  9. jmeter 压测的执行步骤步骤

    一.设置测试参数 如图 Number of Threads:总共起多少个线程. Ramp-UP Period(in seconds):多少秒启动完所有线程. loop Count:循环次数 Sched ...

  10. lvs模式配置

    lvs模式配置 lvs简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linu ...