属性定义及使用说明

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. vim 基础

    光标移动(命令模式的上下左右):k,j,h,l 保存/退出 仅保存::w 退出::q(如果有修改要先保存) 保存并退出::wq(x效果一致) 强制退出::q! 模式 命令模式:esc(当前需要处于插入 ...

  2. 错题记录：C51同一个hex文件偶尔效果不行 的处理方法

    51单片机很多方面和C语言有区别,经验下来,总结以下:1.关于变量报错:报错的原因大多是因为编译器C++版本不同,所以变量我都推荐使用驼峰命名法;2.如果同一个hex文件,或者改的代码自己认为没问题 ...

  3. Python面向对象编程——一些类定义（杂）

    一.abstractmethod 子类必须全部实现重写父类的abstractmethod方法 非abstractmethod方法可以不实现重写 带abstractmethod方法的类不能实例化 fro ...

  4. Tplmap-20220206

    Usage: python tplmap.py [options] 选项: -h, --help 显示帮助并退出 目标: -u URL, --url=URL 目标 URL -X REQUEST, -- ...

  5. Kubernetes--用kubeadm搭建集群环境

    架构 k8s的组件架构图 OCI (Open Container Initiative) 开放容器标准.是一个轻量级,开放的治理结构(项目),在 Linux 基金会的支持下成立,致力于围绕容器格式和运 ...

  6. gui的服务器和vnc安装测试

    为了OpenStack做连接准备,我们要准备企业中不常用到的gui桌面,和vnc连接去调试 然后开始我们的教程 yum grouplist 列出包组选择要安装的服务 systemctl stop za ...

  7. vue项目中axios跨域设置

    最近项目中遇到一个问题,测试环境和线上环境需要调同一个接口(接口地址是线上的),本地开发的时候遇到了跨域的问题,刚开始用了fetch解决的,代码如下 方法一 step1:安装包node-fetch,然 ...

  8. dpkt 简单应用

    import dpktfrom dpkt.utils import mac_to_str,inet_to_strcap=f'D:/test_pacp/6.pcap'with open(cap,'rb' ...

  9. JAVA - 判断两个浮点数相等

    JAVA - 判断两个浮点数相等 背景知识 float型和double型是JAVA的基本类型,用于浮点数表示,在JAVA中float型占4个字节32位,double型占8个字节64位,一般比较适合用于 ...

  10. [Leetcode 104]二叉树最大深度Maximum Depth of Binary Tree

    题目 求二叉树的深度,即根节点出发的最长路径上点的个数,即最长路径+1(本身这个点 https://leetcode.com/problems/maximum-depth-of-binary-tree ...