CSS中clip-path、white-space使用

news2025/7/8 19:03:44

clip-path

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域、之前大部分都是使用 overflow: hidden + border-radous 来实现一些布局 使用 clip-path 可以按需更简便的完成。

clip-path: polygon

多边形显示 里面输入坐标值  左上角为原点,右下角是(100%,100%)的点 值为多个坐标点组成,坐标第一个值是x方向,第二个值是y方向。 有几个点就是几变形(最少三角形)/

顺序 逆时针  右上 左上 左下  右下

.polygon1 {
  clip-path: polygon(0px 100%,50% 0px, 100% 100%)
}

.polygon2 {
  clip-path: polygon(0px 50%, 50% 0, 100% 50%, 50% 100%)
}

.polygon3 {
  clip-path: polygon(0% 60%, 20% 0%, 60% 0%, 40% 60%)
}

polygon1 三个点 clip-path: polygon(0px 100%,50% 0px, 100% 100%)

第一个(x:0;y:100)就是左下角 

第二个(x:50,y:0)就是最上面中间的点

第三个(x:100;y:100)就是右下角 

所以就形成了一个三角形

polygon2  四个点 clip-path: polygon(0px 50%, 50% 0, 100% 50%, 50% 100%)

取每条边的中间、 形成一个菱形  盒子里面放入一张图片  只在菱形区域内显示

 

实现一个异形的图片列表:

显示区域是稍微倾斜的平行四边形、第一个的左上角和最后一个右下角 补满

.polygon5 {
  clip-path: polygon(100% 0%, 20% 0%, 0% 100%, 80% 100%);
  display: inline-block;
  margin-right: -20px!important;
}
<div>
  <div class="polygon5" style="clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 80% 100%);">
    <img src="http://www.wsg3096.com/ass/avata/ava_1.jpg" alt="" width="100%">
  </div>
  <div class="polygon5">
    <img src="http://www.wsg3096.com/ass/avata/ava_2.jpg" alt="" width="100%">
  </div>
  <div class="polygon5">
    <img src="http://www.wsg3096.com/ass/avata/ava_3.jpg" alt="" width="100%">
  </div>
  <div class="polygon5">
    <img src="http://www.wsg3096.com/ass/avata/ava_4.jpg" alt="" width="100%">
  </div>
  <div class="polygon5">
    <img src="http://www.wsg3096.com/ass/avata/ava_5.jpg" alt="" width="100%">
  </div>
  <div class="polygon5" style="clip-path: polygon(100% 0%, 20% 0%, 0% 100%, 100% 100%);">
    <img src="http://www.wsg3096.com/ass/avata/ava_6.jpg" alt="" width="100%">
  </div>
</div>

 

 

 clip-path: circle

显示区域为一个圆形 

值为一个坐标点和半径组成。

左上角为原点,右下角是(100%,100%)的点。

定义半径的时候可以用at关键字来定义坐标。

clip-path: circle(30%(半径) at 10% 10%(圆心的坐标))

.circle1 {
  clip-path: circle(50% at 50% 50%)
}

.circle2 {
  clip-path: circle(60% at 50% 50%)
}

.circle3 {
  clip-path: circle(30% at 10% 10%)
}

 

clip-path: ellipse

椭圆又两个焦点(半径)其他的设置和 circle圆形一样

值为椭圆的x轴半径,y轴半径,定位椭圆的坐标三部分组成。

左上角为原点,右下角是(100%,100%)的点。

at关键字将半径和坐标分开

.ellipse1 {
  clip-path: ellipse(30% 20% at 50% 50%)
}

.ellipse2 {
  clip-path: ellipse(20% 30% at 50% 50%)
}

.ellipse3 {
  clip-path: ellipse(60% 10% at 10% 10%)
}

 

clip-path: inset

值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)

round前面的数值,表示的是对应方向方向的内距离,如果第一个值为25%,则表示图像在上面从25%开始绘制

.inset1 {
  clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%)
}

.inset2 {
  clip-path: inset(0% 25% 25% 0% round 25% 25% 25% 0%)
}

.inset3 {
  clip-path: inset(25% 25% 0% 0% round 0% 25% 0% 25%);
}

 

 white-space 属性 

可以识别换行在编辑器里 敲回车  比之前插入 <br> 方便了许多

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/9362.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

工程师新红利,我国预计到2025年培养20万名这类人才

前 言 近段时间&#xff0c;受到众所周知的事件影响&#xff0c;国外半导体企业掀起一股裁员潮。据《日经亚洲评论》报道&#xff0c;当外资公司正在收缩中国业务时&#xff0c;中国科技企业借此正竭力争夺外资企业中的成熟工程师。这足以说明一点&#xff0c;国内对成熟工程…

三剑客之 grep

目录基本参数正则表达式本文参考文献&#xff1a;GNU Grep 3.8 grep 是一个在 UNIX 上的命令行工具&#xff0c;它通过给定的模式&#xff08;pattern&#xff09;来搜索一个输入文件&#xff0c;并输出匹配到这些模式的内容 grep 于1974年公开&#xff0c;是文本三剑客中最早…

ROS总结理解

机器人操作系统入门_中科院软件所-重德智能机器人联合研究中心_中国大学MOOC(慕课) 可以参考视频学习 目录 .1ROS版本 .2 ROS架构 .3 ROS与IDE安装 .4 Catkin与工作空间 5.ROS的Package结构 6.ROS的常用指令 7.Metapackage 8.Master和Node .9 Topic和msg .10 Servic…

css 改变下划线长度,伪元素模拟border-bottom

要实现文字下方下划线 1 border-bottom配合width <html><head><style>p {border-bottom: 1px solid red;}</style> </head><body><p>选中内容</p> </body></html>直接设置border-bottom&#xff0c;会由于p标签…

vue3使用element-plus

1、下载包 npm install element-plus --save 2、引入 全局引入挂载&#xff1a;引入记得有css文件&#xff08;下载不下来可能是项目正在运行&#xff0c;先关掉&#xff09; import { createApp } from vue import App from ./App.vue import ElementPlus from element-plus …

MySQL 主从复制

现在我们的应用基本都往高性能的方向发展&#xff0c;各种语言都开始推出一些多进程和分布式的框架&#xff0c;其目的就是为了能够做到一个高性能的应用。包括会使用各种MQ和缓存的中间件&#xff0c;其实使用这些中间件的最终目的都是为了能够缓解数据库的压力&#xff0c;数…

下载离线地图地形数据库(3D离线地图开发)

下载离线地图地形数据库&#xff08;3D离线地图开发&#xff09; 发布时间&#xff1a;2020-03-03 版权&#xff1a; 离线地形&#xff1a;是用来表示地表高低起伏的一种三维地形数据库&#xff0c;有了这个地形数据&#xff0c;才能真实的反应出地球表面的高低起伏状态&#…

Docker安装Nginx并修改Nginx配置文件

一、Docker安装Nginx 1、首先在虚拟机上要确保你已经启动了docker。 2、其次登录DockerHub官网&#xff0c;然后搜索nginx&#xff0c;,然后在虚拟机里面输入docker pull nginx,就可以下载nginx的镜像了。 3、注意下载完以后要使用docker images指令查看一下是否下载成功了&am…

市场调查与分析[市场调查员][抽样技术方案][抽样方法][F检验]

正大杯比赛最新参考题&#xff08;预测含必考&#xff09; - 知乎 目录 A市场调查员 B抽样技术方案 一、调查目的、范围、对象及内容 二、抽样方案设计的原则与特点 三、样本区、县的选取 3.1全国区、县的调查总体 3.2区、县分层 (1)地域 (2)区、县类别 四、各阶…

怎么复习信息系统项目管理师?

废话不多说~ 正文开始~ 一、备考前期准备 1、合理规划时间&#xff0c;把握备考节奏 大家在网上经常会看到&#xff0c;考软考高级很简单&#xff0c;说是1个月就可以。 确实现实中存在大神&#xff0c;况且运气还占据一定比例&#xff0c;人家能上&#xff0c;咱真的不一…

鼎医信息加入PolarDB开源数据库社区

近日&#xff0c;上海鼎医信息技术有限公司签署阿里巴巴开源CLA(Contribution License Agreement, 贡献许可协议), 正式与阿里云PolarDB 开源数据库社区牵手。 过去 5 年&#xff0c;阿里云针对 PolarDB 进行了诸多创新&#xff0c;通过采用存储计算分离、软硬一体化设计&#…

SREWorks v1.3 版本发布 | 插件机制发布

在v1.2版本发布之后&#xff0c;SREWorks团队着手开始了v1.3版本的迭代。此次v1.3版本融合了较多用户需求&#xff0c;以及对底座机制进行了较大调整和优化&#xff0c;故发版时间长了很多。下面让我们切入正题&#xff0c;来看看这些大变化究竟是哪些&#xff1f; 1. 插件机制…

Web3——开发第一个智能合约

学习写第一个智能合约&#xff0c;下面连接是集成开发环境 https://github.com/smartcontractkit/full-blockchain-solidity-course-js#lesson-2-welcome-to-remix-simple-storage 点击 “Remix” 来到Remix IDE&#xff0c;这就是我们要写代码的地方&#xff0c;集成开发环境…

一文入门mybatis-plus

mybatis-plus mybatis-plus官网 MyBatis-Plus (opens new window)&#xff08;简称 MP&#xff09;是一个 MyBatis (opens new window)的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生. 可以说呢&#xff0c;在MP基础上还可…

一次想不到的 Bootstrap 类加载器带来的 Native 内存泄露分析

最近我们线上有同学反馈&#xff0c;java 服务在接入了支持预发的 javaagent 以后会出现缓存的内存增长&#xff0c;去掉 agent 启动以后内存增长正常。于是分析了一下这个问题&#xff0c;写了这篇文章。 备注&#xff1a;JVM 堆内存最大 1000M 主要会涉及下面这些内容&#…

防火墙基础技术

目录 一、内容概述 二、防火墙概述 防火墙的应用 防火墙的本质 防火墙的发展历程 防火墙特征 防火墙分类 包过滤防火墙&#xff1a; 包过滤防火墙的缺点&#xff1a; 代理防火墙&#xff1a; 代理防火墙的缺点&#xff1a; 状态检测防火墙&#xff1a; 状态检测防火…

【Linux修炼手册:基本指令(下)】

目录 1 man指令&#xff08;重要&#xff09; 2 more指令 3 less指令&#xff08;重要&#xff09; 4 head指令和tail指令 5 时间相关的指令 6 Cal指令 7 find指令&#xff1a;&#xff08;灰常重要&#xff09; -name 8 grep指令 9 zip/unzip指令 10 其他常见命令 1…

SiPM使用总结

1、SiPM的电子模型 首先我们来看一下二极管的雪崩电子模型&#xff0c;电子模型和雪崩时的电流波形如下图所示&#xff0c; 电流上升的快慢是由电容的充放电速度决定的&#xff0c;充电的时常数TdRS*Cd&#xff0c;放电的时常数 TqRq*Cd&#xff0c;这里Rq>>Rs&#xf…

《Hidden Markov Map Matching Through Noise and Sparseness》读书笔记

摘要 Our test shows how the algorithm breaks down as the sampling rate of the GPS is reduced. We also test the effect of increasing amounts of additional measurement noise in order to assess how well our algorithm could deal with the inaccuracies of other…

甘露糖修饰阿奇霉素|mannose-Azithromycin|甘露糖-聚乙二醇-阿奇霉素

甘露糖修饰阿奇霉素|mannose-Azithromycin|甘露糖-聚乙二醇-阿奇霉素 甘露糖修饰阿奇霉素&#xff0c;溶于大部分有机溶剂&#xff0c;如&#xff1a;DCM、DMF、DMSO、THF等等。在水中有很好的溶解性&#xff0c;取用一定要干燥&#xff0c;避免频繁的溶解和冻&#xff0c;提供…