当前位置：首页 > news >正文

CSS系列（39）-- Shapes详解

news 来源：原创 2025/5/15 14:22:10

前端技术探索系列：CSS Shapes详解 ✨

致读者：探索形状布局的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Shapes，这个强大的形状布局特性。

基础形状 🚀

圆形与椭圆

/* 基础圆形 */
.circle {width: 300px;height: 300px;float: left;shape-outside: circle(50%);clip-path: circle(50%);margin: 20px;
}/* 椭圆形 */
.ellipse {width: 400px;height: 300px;float: right;shape-outside: ellipse(40% 50%);clip-path: ellipse(40% 50%);
}/* 位置调整 */
.positioned-shape {shape-outside: circle(50% at 30% 50%);clip-path: circle(50% at 30% 50%);
}

多边形

/* 三角形 */
.triangle {width: 200px;height: 200px;float: left;shape-outside: polygon(0 0, 100% 0, 50% 100%);clip-path: polygon(0 0, 100% 0, 50% 100%);
}/* 六边形 */
.hexagon {width: 200px;height: 230px;float: left;shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

高级特性 🎯

图像形状

/* 图像形状 */
.image-shape {width: 300px;height: 300px;float: left;shape-outside: url('shape.png');shape-image-threshold: 0.5;shape-margin: 20px;
}/* 渐变形状 */
.gradient-shape {width: 200px;height: 400px;float: left;shape-outside: linear-gradient(45deg,transparent 0%,transparent 50%,black 50%,black 100%);
}

动画效果

/* 形状动画 */
.morphing-shape {animation: morph 3s infinite;
}@keyframes morph {0% {shape-outside: circle(50%);clip-path: circle(50%);}50% {shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}100% {shape-outside: circle(50%);clip-path: circle(50%);}
}

创意布局 💫

文本环绕

/* 环绕布局 */
.text-wrap {width: 100%;max-width: 800px;margin: 0 auto;
}.float-shape {width: 300px;height: 300px;float: left;shape-outside: circle(50%);shape-margin: 1rem;margin: 0 1rem 1rem 0;
}/* 双形状环绕 */
.dual-wrap {position: relative;
}.left-shape {float: left;shape-outside: polygon(0 0, 100% 0, 0 100%);
}.right-shape {float: right;shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

响应式形状

/* 响应式调整 */
.responsive-shape {width: 40vw;height: 40vw;max-width: 400px;max-height: 400px;float: left;shape-outside: circle(50%);clip-path: circle(50%);
}@media (max-width: 768px) {.responsive-shape {width: 100%;height: auto;float: none;shape-outside: none;clip-path: none;}
}

实际应用 ⚡

杂志布局

/* 杂志风格 */
.magazine-layout {column-width: 300px;column-gap: 2rem;
}.pull-quote {width: 200px;height: 200px;float: left;shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%);padding: 2rem;margin: 1rem;
}

装饰效果

/* 装饰形状 */
.decorative-shape {position: absolute;width: 300px;height: 300px;shape-outside: circle(50%);background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));opacity: 0.1;z-index: -1;
}/* 形状组合 */
.shape-composition {position: relative;
}.shape-layer-1 {shape-outside: circle(40%);clip-path: circle(40%);
}.shape-layer-2 {shape-outside: polygon(0 0, 100% 0, 50% 100%);clip-path: polygon(0 0, 100% 0, 50% 100%);transform: rotate(45deg);
}

最佳实践建议 💡

设计考虑
- 内容适配
- 响应式设计
- 视觉平衡
- 可访问性
性能优化
- 形状复杂度
- 动画性能
- 资源加载
- 降级方案
开发建议
- 模块化设计
- 复用形状
- 维护性考虑
- 浏览器兼容
创意技巧
- 形状组合
- 动态效果
- 交互增强
- 视觉层次

写在最后 🌟

CSS Shapes为我们提供了创建独特视觉布局的强大能力，通过合理运用这一特性，我们可以构建出更加富有创意和专业的网页设计。

进一步学习资源 📚

Shapes规范
布局技巧集
创意案例库
实战项目分析

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻

CSS系列（39）-- Shapes详解

前端技术探索系列：CSS Shapes详解 ✨ 致读者：探索形状布局的艺术 👋 前端开发者们， 今天我们将深入探讨 CSS Shapes，这个强大的形状布局特性。基础形状 🚀 圆形与椭圆 /* 基础圆形 */ .circle {widt…...

编程日记 2025/5/15 14:22:10

kafka的备份策略：从备份到恢复

文章目录一、全量备份二、增量备份三、全量恢复四、增量恢复前言：Kafka的备份的单元是partition，也就是每个partition都都会有leader partiton和follow partiton。其中leader partition是用来进行和producer进行写交互，follow从leader副本进…...

编程日记 2025/5/12 17:36:33

Android着色器SweepGradient渐变圆环，Kotlin

Android着色器SweepGradient渐变圆环，Kotlin import android.content.Context import android.graphics.Canvas import android.graphics.Color import android.graphics.Paint import android.graphics.Path import android.graphics.SweepGradient import android…...

编程日记 2025/5/11 11:00:08

SQL 实战：聚合函数高级用法 – 多层分组与动态统计

在数据分析中，聚合函数如 COUNT()、SUM()、AVG()、MAX()、MIN() 等是最常用的工具之一。它们允许我们对大量数据进行汇总和统计。然而，随着业务需求的复杂化，我们常常需要进行更复杂的统计操作，例如多层次的分组统计、动态分组等。…...

编程日记 2025/5/9 9:19:10

从零创建一个 Django 项目

1. 准备环境在开始之前，确保你的开发环境满足以下要求： 安装了 Python (推荐 3.8 或更高版本)。安装 pip 包管理工具。如果要使用 MySQL 或 PostgreSQL，确保对应的数据库已安装。创建虚拟环境在项目目录中创建并激活虚拟环境&#xff…...

编程日记 2025/5/12 1:28:28

Spring Boot 3.4新特性：RestClient和RestTemplate的重大更新详解

本文将深入探讨Spring Boot 3.4版本中关于RestClient和RestTemplate的重要更新。。 1. 背景介绍在Spring生态系统中，HTTP客户端一直是一个重要的组件。从最早的RestTemplate，到WebClient，再到现在的RestClient，每一次演进都带来…...

编程日记 2025/5/15 10:10:16

ANSYS EMC Plus：谐振腔中的天线

概述本博客说明了如何使用 EMA3D 和 MHARNESS 模拟工具来模拟腔内天线产生的电场。下面简要概述了完成模拟所需的步骤，视频链接中提供了完整的演示。步骤1：定义模拟域准备模拟的第一步是定义模拟域。该域应包含所有需要分析的几何图形。在此演示中…...

编程日记 2025/5/12 8:16:15

lv_ffmpeg学习及播放rtsp

lvgl8.3有ffmpeg支持 FFmpeg support typedef struct {lv_img_t img;lv_timer_t * timer;lv_img_dsc_t imgdsc;bool auto_restart;struct ffmpeg_context_s * ffmpeg_ctx; } lv_ffmpeg_player_t;typedef enum {LV_FFMPEG_PLAYER_CMD_START,LV_FFMPEG_PLAYER_CMD_STOP,LV_FFMP…...

编程日记 2025/5/11 9:48:04

Java前端基础—HTML

Java前端基础—HTML 目录 Java前端基础—HTML1.简介2.基础语法2.1HTML页面固定结构2.2标题标签2.3段落标签2.4换行标签2.5水平线标签2.6文本标签2.7图片标签2.8音频标签2.9视频标签2.10链接标签2.11列表标签2.12表格标签2.13表单标签2.14语义标签 1.简介 1.网页组成&#xff1…...

编程日记 2025/5/13 17:20:41

salesforce 控制 Experience Cloud 站点用户可以看到哪些用户

在 Salesforce 的 Experience Cloud 中，您可以通过多种方式控制站点用户（如社区用户）之间的可见性。这包括用户之间的信息可见性以及他们可以访问的其他用户数据。以下是几种方法和设置，用于实现对 Experience Cloud 站点用户可见…...

编程日记 2025/5/12 8:52:00

C语言实现尼科彻斯定理

1.题目： 2.分析【1】怎么输出连续奇数：下面是输出m个连续奇数的代码 #include<stdio.h>int main(){int m,x;scanf("%d",&m);for(int i0;i<m:i){printf("%d",x);xx2;}return 0; } 【2】啥叫尼科彻斯定理？…...

编程日记 2025/5/11 15:56:05

【Ubuntu添加右键wine运行exe程序文件】

【前提】你在Ubuntu中安装了wine 【效果展示】右键在打开方式中显示用wine运行以bilibli安装包为例，在B站安装包右键选择打开方式省去了在终端中输入wine命令【步骤】如何添加右键wine运行exe程序文件新建一个文本文档其中填入以下内容 [Desktop Entry]…...

编程日记 2025/5/15 6:44:09

7. Linux网络服务配置全面指南

本章目录： 引言7. 网络服务配置7.1 DNS服务器配置安装BIND配置区域文件创建区域文件测试与重启DNS服务示例图：DNS解析流程 7.2 Web服务器部署（Apache/Nginx）Apache与Nginx的选择安装Apache示例：部署静态网站安装Nginx配…...

编程日记 2025/5/6 7:23:02

深入探讨 Nginx 性能优化：从基础到高级的最佳实践

目录引言Nginx 性能优化的意义Nginx 性能优化的主要方向系统层面的优化 4.1 优化操作系统的文件描述符4.2 调整 TCP 参数4.3 使用高效的磁盘 I/O 调度器 Nginx 配置优化 5.1 优化 worker 进程和连接数5.2 使用异步和非阻塞 I/O 模式5.3 配置 Gzip 压缩5.4 开启缓存和缓存控制…...

编程日记 2025/5/15 3:49:14

纯 HTML+CSS+JS 实现一个炫酷的圣诞树动画特效

纯 HTMLCSSJS 实现一个炫酷的圣诞树动画特效前言圣诞节快到了，今天给大家带来一个简单但是效果不错的圣诞树动画特效。这个特效完全使用原生 HTML、CSS 和 JavaScript 实现，包含闪烁的星星、随机彩灯等元素，非常适合节日气氛！…...

编程日记 2025/5/11 18:26:11

Python使用requests_html库爬取掌阅书籍（附完整源码及使用说明）

教程概述本教程先是幽络源初步教学分析掌阅书籍的网络结构，最后提供完整的爬取源码与使用说明，并展示结果，切记勿将本教程内容肆意非法使用。原文链接：Python使用requests_html库爬取掌阅书籍（附完整源码及使用说明…...

编程日记 2025/5/12 13:23:47

Linux网络——UDP的运用

Linux网络——UDP的运用文章目录 Linux网络——UDP的运用一、引入二、服务端实现2.1 创建socket套接字2.2 指定网络接口并bind2.3 接收数据并处理2.4 整体代码2.5 IP的绑定的细节三、用户端实现3.1 创建套接字3.2 指定网络接口3.3 发生数据并接收3.4 绑定问题四、代码五、UD…...

编程日记 2025/5/12 8:04:15

axios

文章目录 [TOC](文章目录) 一、axios的基本使用axios请求1、引用axios,并发送请求axios发送请求的简化写法2、接受响应数据，并对响应的数据进行处理三、axios拦截器（instance）1、请求拦截2、响应拦截 axios拦截器、vue中的路由守卫、servlet…...

编程日记 2025/5/15 13:52:58

MacOS下TestHubo安装配置指南

TestHubo是一款开源免费的测试管理工具， 下面介绍MacOS私有部署的安装与配置。TestHubo 私有部署版本更适合有严格数据安全要求的企业，支持在本地或专属服务器上运行，以实现对数据和系统的完全控制。 1、Mac 服务端安装 Mac安装包下载地址&a…...

编程日记 2025/5/15 7:55:03

vue2/3,Spring Boot以及生产环境跨域解决方案

vue2和vue3跨域解决方案 Vue 2 (基于 Webpack) 的跨域解决方案 1. 创建或编辑 vue.config.js 文件 Vue CLI为Webpack项目提供了简单的代理配置方式。你可以通过创建或编辑项目的根目录下的 vue.config.js 文件来设置开发服务器的代理规则： // vue.config.js mod…...

编程日记 2025/5/12 14:50:03

TestMAX/DFT Compiler：时序单元的类型、连接顺序和后DFT优化

相关阅读 TestMAX/DFT Compilerhttps://blog.csdn.net/weixin_45791458/category_12865937.html?spm1001.2014.3001.5482 时序单元的状态未映射的时序单元(Unmapped Sequential Cell) 在Design Compiler读取了一个RTL设计后，Design Compiler内置的HDL Compiler工…...

编程日记 2025/5/6 20:02:12

Elasticsearch：analyzer（分析器）

一、概述可用于将字符串字段转换为单独的术语： 添加到倒排索引中，以便文档可搜索。级查询（如生成搜索词的 match查询）使用。分析器分为内置分析器和自定义的分析器，它们都是由若干个字符过滤器（chara…...

编程日记 2025/5/13 15:04:28

蓝桥杯——异或森林

问题描述在一个神秘的世界中，存在着一个称为"异或森林"的地方。异或森林中的每个树木都拥有独特的力量。肖恩进入了这片森林，他得到了一个任务：找出数组中满足条件的连续子数组，使得连续子数组中所有元素异或运算结果…...

编程日记 2025/5/11 13:22:04

第一个C++程序 - Hello World, 编译与运行

引言编写并运行你的第一个 C 程序是学习这门语言的第一步。通过这个简单的例子，你将了解如何创建、编译和运行一个基本的 C 程序。本文将详细介绍每个步骤，并确保初学者能够顺利上手。一、编写 "Hello World" 程序 1. 创建源代码文件首先…...

编程日记 2025/5/11 8:33:28

学习threejs，PerspectiveCamera透视相机和OrthographicCamera正交相机对比

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.PerspectiveCamera透…...

编程日记 2025/5/12 15:16:21

测试 - 4 （ 9000 字详解）

一：性能测试 1.1 什么是性能测试性能测试和功能测试虽然都在系统测试阶段进行，但两者有本质区别。功能测试主要关注系统“能否完成特定功能”，例如一辆车是否具备四个轮子、方向盘、挡风玻璃，以及是否能够正常行驶。而性能测试…...

编程日记 2025/5/11 12:23:02

从 Coding (Jenkinsfile) 到 Docker：全流程自动化部署 Spring Boot 实战指南（简化篇）

前言本文记录使用 Coding (以 Jenkinsfile 为核心) 和 Docker 部署 Springboot 项目的过程，分享设置细节和一些注意问题。 1. 配置服务器环境在实施此过程前，确保服务器已配置好 Docker、MySQL 和 Redis，可参考下列链接进行操作&#xff1…...

编程日记 2025/5/15 0:47:26

NIPS2014 | GAN: 生成对抗网络

Generative Adversarial Nets 摘要-Abstract引言-Introduction相关工作-Related Work对抗网络-Adversarial Nets理论结果-Theoretical Results实验-Experiments优势和不足-Advantages and disadvantages缺点优点结论及未来工作-Conclusions and future work研究总结未来研究方…...

编程日记 2025/5/3 21:03:44

WebGPU入门初识

什么是 WebGPU？ WebGPU 是一种现代图形 API，旨在取代 WebGL，提供更高性能和更灵活的 GPU 加速能力。它基于 Vulkan、Metal 和 Direct3D 12，为 Web 开发者带来了类似于原生图形 API 的性能和控制力。与 WebGL 不同，Web…...

编程日记 2025/5/14 17:13:06

Go语言基础语法

文章目录 Go语言基础语法一、引言二、基础语法1、变量声明与作用域1.1、全局变量1.2、局部变量1.3、块作用域 2、基本数据类型3、控制流程3.1、条件语句3.2、循环语句 4、函数5、并发编程三、使用示例四、并发编程示例五、变量作用域详解六、总结 Go语言基础语法一、引言 G…...

编程日记 2025/5/15 1:05:33

易基因： BS+ChIP-seq揭示DNA甲基化调控非编码RNA(VIM-AS1)抑制肿瘤侵袭性｜Exp Mol Med

大家好，这里是专注表观组学十余年，领跑多组学科研服务的易基因。肝细胞癌（hepatocellular carcinoma，HCC）早期复发仍然是一个具有挑战性的领域，其中涉及的机制尚未完全被理解。尽管微血管侵犯&#xff08…...

编程日记 2025/5/15 8:03:16

layui动态拼接生成下拉框验证必填项失效问题

利用 jQuery 动态拼接下拉框时，lay-verify"required" 失效了，有以下几种原因。 1. <form></form>标签加入 layui 类，class"layui-form" 。提交按钮上加自动提交，lay-submit ""; 。需…...

编程日记 2025/5/13 21:16:24

Speckly：基于Speckle文档的RAG智能问答机器人

前言 Speckly 是一个基于检索增强生成 (RAG) 技术的智能问答机器人，它能像一位经验丰富的工程师，理解你的问题，并从 Speckle 文档中精准地找到答案。更厉害的是，它甚至可以帮你生成代码片段！🚀 本文将详…...

编程日记 2025/5/11 21:35:03

NodeRed使用心得，实现增删改查等

使用场景介绍在VUE中使用nodeRed实现对节点的增删改查等功能，且储存成功之后下点击时启动对应流程安装与配置 1.安装NodeRed npm install -g --unsafe-perm node-red 安装完成后，你可以通过运行以下命令来启动Node-RED node-red-start2. 配置文件 N…...

编程日记 2025/5/8 17:31:10

万物皆有解法（序）

万物皆有解法（序） 《万物有解》一：解的存在解：可做解释解答，此文引申为原因。可做解除、解围，此文引申为解法、方法。先有事物存于世-what，再有原因为何存-why，再有解法如何除去…...

编程日记 2025/5/4 15:15:02

OpenCV相机标定与3D重建(37)计算两幅图像之间单应性矩阵（Homography Matrix）的函数findHomography()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述找到两个平面之间的透视变换。 cv::findHomography 是 OpenCV 库中用于计算两幅图像之间单应性矩阵（Homography Matrix）的…...

编程日记 2025/5/9 0:51:24

从虚拟到现实：AI与AR/VR技术如何改变体验经济？

引言：体验经济的崛起在当今消费环境中，产品与服务早已不再是市场竞争的唯一焦点，能够提供深刻感知和独特体验的品牌，往往更能赢得消费者的青睐。这种转变标志着体验经济的崛起。体验经济不仅仅是简单的买卖行为，而是通…...

编程日记 2025/5/15 0:12:35

Linux系统之stat命令的基本使用

Linux系统之stat命令的基本使用一、stat命令介绍二、stat命令帮助2.1 查询帮助信息2.2 stat命令的帮助解释三、stat命令的基本使用3.1 查询文件信息3.2 查看文件系统状态3.3 使用格式化输出3.4 以简洁形式打印信息四、注意事项一、stat命令介绍 stat 命令用于显示文件或文…...

编程日记 2025/5/10 2:03:50

c++ 命名空间

目录目录目录 namespace的定义代码演示先使用全局域，再使用namespace定义出的域命名空间中可以定义变量/函数/类型等命名空间可以嵌套 namespace的使用指定命名空间访问 using将命名空间中某个成员展开展开命名空间中全部成员在c中，由…...

编程日记 2025/5/10 6:34:55

【实验记录】动手实现一个简单的神经网络实验（一）

最近上了“神经网络与深度学习”这门课，有一个自己动手实现调整神经网络模型的实验感觉还挺有记录意义，可以帮我巩固之前学习到的理论知识，所以就打算记录一下。实验大概是使用LeNet（卷积神经网络）对MINIST数据集做图…...

编程日记 2025/5/14 20:38:56

【2024年最新】BilibiliB站视频动态评论爬虫

废话不多说，直接先放git仓库：GitHub - linyuye/Bilibili_crawler: bilibili爬虫，基于selenium获取oid与cookie，request获取api内容〇：概念简述 oid：视频/动态的uuid，b站对于发布内容的通用唯…...

编程日记 2025/5/15 2:22:29

清空DNS 缓存

如果遇到修改了host文件，但是IP和域名的映射有问题的情况，可以尝试刷新DNS缓存。 ipconfig/flushdns win建加R建，然后输入cmd，然后回车然后回车，或者点击确定按钮。出现如下所示标识清空DNS 缓存成功。...

编程日记 2025/5/3 9:04:43

东土智能交通服务器助力北京市车路云一体化建设

背景及意义北京高级别自动驾驶示范区自2020年启动建设，至今已经发展建设到3.0阶段，通州区作为3.0阶段扩建的重点区域之一，扩区建设范围共计约175平方公里，涉及18个属地街镇，涵盖580个路口。作为北京市车路云一体化…...

编程日记 2025/5/15 12:47:44

HarmonyOS NEXT 实战之元服务：静态案例效果---妙语集语

背景： 前几篇学习了元服务，后面几期就让我们开发简单的元服务吧，里面丰富的内容大家自己加，本期案例仅供参考先上本期效果图 ，里面图片自行替换效果图1完整代码案例如下： import { authentication } …...

编程日记 2025/5/10 15:44:15

python基础项目

1.联系人案例 # 导入的模块 from input_util import * import re import csv# 定义一个变量保存文件读取的信息 users {}# 封装读取文件的函数 def reader_file(path_name: str ./python基础/2024-11-15python基础项目/data/a.csv) -> None:try:with open(path_name, enco…...

编程日记 2025/5/14 13:50:47

mysql返回N/A

在写统计图的接口，sql查询一直无数据，给的默认值也没有实现： SELECTifnull( unit.num, 0 ) riskUnitCount,ifnull( EVENT.num, 0 ) riskEventCount,ifnull( measure.num, 0 ) riskMeasureCount FROMtb_companyLEFT JOIN (SELECTrisk.qyid,co…...

编程日记 2025/5/14 11:36:10