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

文章目录

    • 属性用法:

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

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

属性用法:

  • clip-path :CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。
属性值描述
inset()定义一个 inset 矩形。
circle()定义一个圆形(使用一个半径和一个圆心位置)。
ellipse()定义一个椭圆(使用两个半径和一个圆心位置)。
polygon()定义一个多边形(使用一个 SVG 填充规则和一组顶点)。
path()定义一个任意形状(使用一个可选的 SVG 填充规则和一个 SVG 路径定义)。
/* 上下裁剪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.rhkb.cn/news/480426.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MTK 展锐 高通 sensorhub架构

一、MTK平台 MTK框架可以分为两部分,AP和SCP。 AP是主芯片,SCP是协处理器,他们一起工作来处理sensor数据。 SCP 是用来处理sensor和audio相关功能和其他客制化需求的一个协处理理器,MTK SCP选择freeRTOS作为操作系统&#xff0c…

JDK的版本演化,JDK要收费吗?

Java版本演化历史 Java的版本历史可以追溯到1995年,以下是Java语言自诞生以来的主要版本及其关键特性: 一、早期版本 Java 1.0(1996年1月发布) 引入了Java虚拟机(JVM)和Java应用编程接口(API&…

【Code First】.NET开源 ORM 框架 SqlSugar 系列

.NET开源 ORM 框架 SqlSugar 系列 【开篇】.NET开源 ORM 框架 SqlSugar 系列【入门必看】.NET开源 ORM 框架 SqlSugar 系列【实体配置】.NET开源 ORM 框架 SqlSugar 系列【Db First】.NET开源 ORM 框架 SqlSugar 系列【Code First】.NET开源 ORM 框架 SqlSugar 系列 &#x1f…

podman 源码 5.3.1编译

1. 构建环境 在麒麟V10服务器操作系统上构建:Kylin-Server-V10-GFB-Release-2204-Build03-ARM64.iso。由于只是编译 podman 源码,没必要特地在物理机或服务上安装一个这样的操作系统,故采用在虚拟机里验证。 2. 安装依赖 参考资料&#xf…

git的使用(简洁版)

什么是 Git? Git 是一个分布式版本控制系统 (DVCS),用于跟踪文件的更改并协调多人之间的工作。它由 Linus Torvalds 在 2005 年创建,最初是为了管理 Linux 内核的开发。Git 的主要目标是提供高效、易用的版本控制工具,使得开发者…

Vue构建错误解决:(error TS6133)xxx is declared but its value is never read.

TypeScript会检查代码中未使用的变量,如果vscode安装了Vue的语法检查工具,会看到告警提示,再npm run build的时候,这个警告会变成错误 解决方案1:删除定义了未使用的变量 推荐使用这种方案,能保证代码的质…

Perplexica - AI 驱动的搜索引擎

更多AI开源软件: AI开源 - 小众AIhttps://www.aiinn.cn/sources Perplexica 是一个开源的 AI 驱动的搜索工具或 AI 驱动的搜索引擎,可以深入互联网寻找答案。受 Perplexity AI 的启发,它是一个开源选项,不仅可以搜索网络&#xf…

企业后端多租户管理平台

1 简介 此系统在企业后端管理系统上进行的更改,用于快速开发租户管理平台。项目中详细的功能请查看文章:企业后端系统通用模版_后端模板-CSDN博客 支持多租户,支持多租户切换,支持多租户数据隔离,支持多租户数据同步等…

微信小程序蓝牙writeBLECharacteristicValue写入数据返回成功后,实际硬件内信息查询未存储?

问题:连接蓝牙后,调用小程序writeBLECharacteristicValue,返回传输数据成功,查询硬件响应发现没有存储进去? 解决:一直以为是这个write方法的问题,找了很多相关贴,后续进行硬件日志…

Zero to JupyterHub with Kubernetes中篇 - Kubernetes 常规使用记录

前言:纯个人记录使用。 搭建 Zero to JupyterHub with Kubernetes 上篇 - Kubernetes 离线二进制部署。搭建 Zero to JupyterHub with Kubernetes 中篇 - Kubernetes 常规使用记录。搭建 Zero to JupyterHub with Kubernetes 下篇 - Jupyterhub on k8s。 参考&…

电脑无互联网连接怎么解决?分享5种解决方案

无互联网连接是指设备无法与互联网进行通信或连接失败。这可能会导致我们无法正常上网,给我们的日常生活和工作带来很大的不便。但请不要担心,下面将为您介绍一些解决无互联网连接问题的方法。 一、检查网络是否正常连接 首先,确保您的路由器…

Web前端学习_CSS盒子模型

content padding border margin <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>CSS盒子模型</title><style></style> </head> <body> <div class"demo&quo…

HTML CSS JS基础考试题与答案

一、选择题&#xff08;2分/题&#xff09; 1&#xff0e;下面标签中&#xff0c;用来显示段落的标签是&#xff08; d &#xff09;。 A、<h1> B、<br /> C、<img /> D、<p> 2. 网页中的图片文件位于html文件的下一级文件夹img中&#xff0c;…

华为开源操作系统openEuler安装部署

本文主要描述华为开源操作系统openEuler的安装部署。openEuler是面向数字基础设施的开源操作系统&#xff0c;是由开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff0c;其愿景是为世界提供数字基础设施的开源操作系统&#xff0c;其…

分布式搜索引擎之elasticsearch单机部署与测试

分布式搜索引擎之elasticsearch单机部署与测试 1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让es和kibana容器互联。这里先创建一个网络&#xff1a; docker network create es-net1.2.加载镜像 这里我们采用elasticsearch的7.12.1版本的…

渣土车治理新方案:智能化引领安全与环保新时代

一、渣土车问题现状 1. 盲区众多隐患大&#xff0c;事故频发令人忧。 渣土车盲区多&#xff0c;易引发交通事故&#xff0c;给行人和其他车辆带来严重安全威胁。由于渣土车体积庞大&#xff0c;实际的视觉盲区范围包括半盲区为左车门 1.2 米、右前方 1.5 米、正前方 1.2 米&am…

Vue3+node.js实现登录

文章目录 前端代码实现后端代码实现跨域处理 前端代码实现 效果图 前端代码实现 <template><div class"login-container"><el-card class"login-card"><template #header><div class"card-header"><span>…

jenkins 2.346.1最后一个支持java8的版本搭建

1.jenkins下载 下载地址&#xff1a;Index of /war-stable/2.346.1 2.部署 创建目标文件夹&#xff0c;移动到指定位置 创建一个启动脚本&#xff0c;deploy.sh #!/bin/bash set -eDATE$(date %Y%m%d%H%M) # 基础路径 BASE_PATH/opt/projects/jenkins # 服务名称。同时约定部…

Windows10+VirtualBox+Ubuntu:安装虚拟机VirtualBox,虚拟机中安装Ubuntu

一、需求 在Windows10系统中&#xff0c;安装虚拟机VirtualBox&#xff0c;VirtualBox中安装Ubuntu桌面版。 二、环境准备 系统环境 Windows10 内存&#xff1a;8G 虚拟化 虚拟机的运行&#xff0c;如果需要Windows系统开启虚拟化&#xff0c;可以通过BIOS设置。 “虚拟…

pcb元器件选型与焊接测试时的一些个人经验

元件选型 在嘉立创生成bom表&#xff0c;对照bom表买 1、买电容时有50V或者100V是它的耐压值&#xff0c;注意耐压值 2、在买1117等降压芯片时注意它降压后的固定输出&#xff0c;有那种可调降压比如如下&#xff0c;别买错了 贴片元件焊接 我建议先薄薄的在引脚上涂上锡膏…