属性定义及使用说明

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. uni-app 下载文件 预览 + 保存自定义目录

    作为使用uni-app的小白来说  尝试了好几种方法 终于得到了我想要的效果(如下) 1.点击下载按钮(文件 或者图片)  2.预览 :用户自定义选择查看的软件(图片在手机相册 文件用其他打开预览) ...

  2. 目标检测yolov5检测火龙果

    一.github官方网址 https://github.com/ultralytics/yolov5/tree/v6.1 二.labelme标记数据集: (1).进入虚拟环境 (2).pip inst ...

  3. bean实例化三种方式

    实例化bean的方式有三种,如下: 1.无参构造方法实例化 2.工厂静态方法实例化 3.工厂普通方法实例化 此处演示的项目结构如下: 方法一:无参构造方法实例化(注意,该类中不能存在有参构造函数) U ...

  4. QT窗口显示的风格设置

    在main.cpp中添加头文件#include <QStyleFactory> 然后在QApplication a(argc, argv);后添加 a.setStyle(QStyleFac ...

  5. 「SOL」射命丸文的笔记 (洛谷)

    讲题人:"这是一个很经典的模型,大家应该都会" 我:"???" # 题面 给出 \(m\),求所有 \(m\) 个点的有标号强联通竞赛图的哈密顿回路数量的平均数 ...

  6. Typora的下载和MarkDown的相关操作

    MarkDown 作为程序员就要会写blog(网络日记),那么怎么让你的笔记写的排版舒适清晰?我们可以通过MarkDown来写笔记 首先我们要下载Typora,因为现在官网的Typora要付费,所以可 ...

  7. AD9834配置

    SPI设置 注意,虽然手册上CPOL(CLK空闲时电平)为低,但实测是是高电平 连接 SYNC 为片选引脚,使用时拉低 FSE/PSE为频率与相位寄存器选择,均拉低即可 void SPI_Write_ ...

  8. python机器学习——SVM支持向量机

    背景与原理: 支持向量机是一种用来解决分类问题的算法,其原理大致可理解为:对于所有$n$维的数据点,我们希望能够找到一个$n$维的直线(平面,超平面),使得在这个超平面一侧的点属于同一类,另一侧的点属 ...

  9. 4、Redis底层原理（持久化+分布式锁）

    Redis底层原理 持久化 Redis虽然是个内存数据库,但是Redis支持RDB和AOF两种持久化机制,将数据写往磁盘,可以有效地避免因进程退出造成的数据丢失问题,当下次重启时利用之前持久化的文件即 ...

  10. HTTP请求向服务器传参方式

    请求HttpRequest 提示: 用户发送请求时携带的参数后端需要使用,而不同的发送参数的方式对应了不同的提取参数的方式 所以要学会如何提取参数,我们就需要先了解前端传参数有哪些方式 回想一下,利用 ...