属性定义及使用说明

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. 无法加载文件 D:\lunwen\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本。visual code页面vue ui启动失败

    报如下错误 解决方法: 1.以管理员身份运行 Windows PowerShell(管理员)点击win键 搜索powershell 点击以管理员身份运行 如下图所示 2.输入 set-Executio ...

  2. 公共的common.scss （覆盖部分element组件主题色）

    公共的 common.scss (包含主题色 覆盖部分element组件主题色) $theme: #D50000; $litterTheme: #ec6059; .text-theme { color ...

  3. 清华大学资源库 和 CocoaPods / Specs 等多个 资源库共存

    1.如果本地pod 索引文件库只有清华大学的资源库[https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git].如果新在github上制 ...

  4. Window:下载并安装FileZilla客户端

    FileZilla官方网站:https://filezilla-project.org/ 环境 操作系统:Window 10 企业版LTSC;内存:8GB;操作类型:64位. 说明 本人想在腾讯云的系 ...

  5. 【SQL Server】获取表格插入的id(二)——newID()

    现在有一个需求,插入api调用日志表.然后,发起HTTP请求()请求时,需要带入日志表的id). 简化无关的添加,SQL Server表格设计如下: CREATE TABLE mylog ( id I ...

  6. MVC+EF API 跨域

    MVC+EF API --2 一. MVC+EF 不管是MvcHAIS Ef 都有文件夹Controller 二.Link查询 多表联查 匿名类型 三.Postman使用 四.mvc访问使用API 跨 ...

  7. 侠客行+越女剑 <随笔>

    侠客行:自己提炼剧情是一个很费时费劲的事情,好在剽窃百度百科不算抄袭,而且也足够还原,红字为补充 一向平静祥和的小市镇侯监集上,忽然来了二百多名杀人不眨眼的强盗.镇上乡亲们都熟悉的卖饼老者王老汉,却被 ...

  8. pandas的groupby.apply和直接apply效果是不一样的

    GroupBy.apply(func, *args, **kwargs)[source] Apply function func group-wise and combine the results ...

  9. MySql 错误：建表时出错1067 - Invalid default value for 'id'

    问题描述: 建表时报错无效的默认值: CREATE TABLE `product`( `id` INT(10) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ...

  10. 修改allure图标和标题

    allure的logo更换步骤 1.找到allure安装目录,进入目录如:D:\Program Files\allure-2.17.3\plugins\custom-logo-plugin\stati ...