【CSS】clip-path 属性(剪裁显示区域)

devtools/2024/11/29 8:02:53/

文章目录

    • 属性用法:

使用背景:遇到这样一个需求,嵌入一个网页到系统,但是不需要他顶部的导航栏,这时候就可以使用clip-path 属性剪裁到顶部导航栏,把网页相当于照片,把不想要的部分剪掉就好了

  • 使用案例:
css">clip-path: inset(70px 0px 0px);	/* 剪掉顶部70px高度的部分 */
margin-top: 70px;				/* 再将整体部分线上移动70px,避免顶部出现被裁剪的那部分空白 */

属性用法:

  • clip-path :CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
属性值描述
inset()定义一个 inset 矩形。
circle()定义一个圆形(使用一个半径和一个圆心位置)。
ellipse()定义一个椭圆(使用两个半径和一个圆心位置)。
polygon()定义一个多边形(使用一个 SVG 填充规则和一组顶点)。
path()定义一个任意形状(使用一个可选的 SVG 填充规则和一个 SVG 路径定义)。
css">/* 上下裁剪100px,左右裁剪50px */
clip-path: inset(100px 50px);
/* 以x轴为0,y轴为100px的地方作为圆心,裁剪一个50px半径的圆 */
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path("M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

http://www.ppmy.cn/devtools/137870.html

相关文章

【机器学习】——朴素贝叶斯模型

💻博主现有专栏: C51单片机(STC89C516),c语言,c,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux&#xf…

Java 异常处理

目录: 碎碎念: 题目: 问题描述 原因分析: 解决方案: 碎碎念: 我知道我是低代码,但是只是完成个作业,所以就随便写了,能过测试点就行,没想到有个测试点死…

【优选算法】位运算

目录 常见位运算总结1、基础位运算2、给一个数n,确定它的二进制位的第x位上是0还是13、将一个数n的二进制位的第x位改成14、将一个数n的二进制位的第x位改成05、位图的思想6、提取一个数n的二进制位中最右侧的17、将一个数n的二进制位中最右侧的1变为08、位运算的优…

【C++】7000字介绍map容器和set容器的功能和使用

目录 一、关联式容器和序列式容器 二、键值对,> 三、树形结构的关联式容器 四、set容器(key模型) 1、文档官网 2、功能介绍: 3、注意事项: 4、基本使用,更多接口可查看官网: (1&…

【代码随想录|贪心算法02】

122.买股票的最佳时机 题目链接https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-ii 好巧妙的一道题啊,做之前完全不会想到这种解法。 局部最优:收集每天正利润 全局最优:求得最大利润 这道题只让你返回最大的利润和&…

大数据 MapReduce基础实战

一、关于此次实践 1、实战简介 MapReduce是Hadoop的核心功能之一,掌握它对学习Hadoop至关重要。Hadoop Map/Reduce是一个使用简易的软件框架,基于它写出来的应用程序能够运行在由上千个商用机器组成的大型集群上,并以一种可靠容错的方式并行…

定长子串中元音的最大数目

力扣链接:1456. 定长子串中元音的最大数目 - 力扣(LeetCode) 给你字符串 s 和整数 k 。 请返回字符串 s 中长度为 k 的单个子字符串中可能包含的最大元音字母数。 英文中的 元音字母 为(a, e, i, o, u)。 示例1: 输入&#xf…

分布式MQTT代理中使用布隆过滤器管理通配符主题

论文标题:Wildcard Topic Management using Bloom Filter in Distributed MQTT Brokers 中文标题:分布式MQTT代理中使用布隆过滤器管理通配符主题 作者信息: Ryohei Banno,Hitotsubashi University, Graduate School of Social…