属性定义及使用说明

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. QTableWidget CSS样式

    QTableWidget { border:1px solid rgb(170, 170, 127); border-radius:3px; } QScrollBar::handle { backgr ...

  2. Python 字典类型

    1.由于字典中的 key 是非常关键的数据,而且程序需要通过 key 来访问 value,因此字典中的 key 不允许重复.程序既可使用花括号语法来创建字典,也可使用 dict() 函数来创建字典.实 ...

  3. windows环境go安装和goland激活

    1. go环境安装 1.1. go安装包下载 https://golang.google.cn/dl/ https://studygolang.com/dl 1.2. 安装go环境 1.2.1. 点击 ...

  4. 宝塔面板Nginx开启gzip，提高网站访问速度的方法

    这篇文章主要为大家详细介绍了宝塔面板Nginx开启gzip,提高网站访问速度的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 最近有用户问小编说在宝塔面板N ...

  5. vue解决点击事件冒泡 .stop

    vue解决点击事件冒泡  .stop <div @click="toCourse()" > <van-button type="primary" ...

  6. 如何在超星下载非资料页面的ppt

    首先打开迅雷(没有就复制到网页下载) 点击f12 点击网络,筛查出输入flag,在响应模块中找到ppt,复制网址并下载

  7. 自己制作Switch大气层SDFile

    ️SWITCH SDFILE 每次吃灰之后,就想更新下系统,每次都得研究一遍... 决定好好研究下,发现不是很繁琐. SDFile有哪些文件组成! Atmosphere 任天堂Switch定制固件 H ...

  8. 对象和类复习题(c++ prime plus )

    第一题: 为复习题5描述的类提供方法定义,并编写一个小程序来演示所有的特性: bank.h #ifndef BACK_H_ #define BACK_H_ #include <string> ...

  9. openlayers-1 下载及安装使用

    javascript - Import from in Openlayers - Geographic Information Systems Stack Exchange 在浏览器中运行开放层示例 ...

  10. 获取gps

    package com.example.myapplication;import android.Manifest;import android.annotation.SuppressLint;imp ...