☰

企业官网建设流程全解析

首页 / 建站日记 / 企业官网建设流程全解析
千古前端图文教程：CSS3 边框与圆角实战汇总——27 种图形与纯 CSS 爱心的完整实现
2026/10/1 6:56:45 网站建设 项目流程
  • 文档
  • 教程
  • 前端

【免费下载链接】Web

千古前端图文教程，超详细的前端入门到进阶知识库。从零开始学前端，做一名精致优雅的前端工程师。

项目地址：https://gitcode.com/gh_mirrors/we/Web
点击查看免费下载

导读

本篇文章是《千古前端图文教程》中 CSS3 边框知识的实战总结，核心聚焦border-radius圆角属性与border边框宽度/颜色的组合玩法：从最简单的整圆、拱形、半圆，到需要理解"水平半径/垂直半径"的椭圆系图形，再到用透明边框拼出的三角形、饼形、阴阳图和 QQ 对话气泡，最后用伪元素叠加实现纯 CSS 爱心。读完本文，你将掌握border-radius的完整取值规则（含顺时针赋值与对角取值）、利用透明边框绘制任意方向三角形的原理，以及用伪元素叠加法"拼"出复杂图形的通用思路，并可直接把文中代码复制到本地浏览器验证效果。

本文内容主体来自 02-CSS基础/17-CSS3的常见边框汇总.md，border-radius 语法规则与姊妹篇 02-CSS基础/11-CSS3属性详解（一）.md 保持一致，读者可对照阅读。

一、先掌握 border-radius 的取值语法

在动手做图形之前，必须理解border-radius的底层规则，否则后面椭圆、半圆、四分之一圆的写法会难以理解。规则如下（与 02-CSS基础/11-CSS3属性详解（一）.md 一致）：

  • 边框的每个圆角，本质上是一个圆。圆有水平半径和垂直半径：二者相等就是圆，二者不等就是椭圆。
  • 单个角可以单独设置，参数解释为水平半径 垂直半径：
border-top-left-radius: 60px 120px; /* 水平半径 60px，垂直半径 120px */ border-top-right-radius: 60px 120px; border-bottom-left-radius: 60px 120px; border-bottom-right-radius: 60px 120px;
  • 复合写法一：用/分隔水平半径与垂直半径（斜杠左边全部是水平半径，右边全部是垂直半径）：
border-radius: 60px/120px; /* 四个角：水平半径 60px / 垂直半径 120px */
  • 复合写法二：从左上角开始，顺时针赋值。如果当前角没有值，取对角的值为兜底（即 1 个值→四角相同；2 个值→左上右下、右上左下；3 个值→左上、右上左下、右下）：
border-radius: 20px 60px 100px 140px; /* 左上 20px、右上 60px、右下 100px、左下 140px */ border-radius: 20px 60px; /* 左上和右下 20px，右上和左下 60px */
  • 最简洁的写法（四个角半径都相同时）：
border-radius: 60px;
  • 使用百分比时，是按元素横、竖两个对应方向（宽度、高度）的长度来计算的。这是后面"圆角百分比"案例（item 27）的关键，例如宽 180px、高 90px 的盒子写border-radius: 50%，实际等效于90px/45px的椭圆。

下面进入正文的核心部分——将上述规则直接投入实战。

二、CSS3 常见边框汇总：27 个图形的完整实现

这一节是原文档的主体，用一套统一骨架（外层.item网格卡片 + 内层.border-radius图形盒子），通过nth-child依次渲染出 27 种不同形态的图形。下面的代码是完整可运行版本，建议直接保存为 HTML 文件在浏览器中打开：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 边框</title> <style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0; padding: 0; } body { background-color: #F7F7F7; } .wrapper { width: 1000px; margin: 0 auto; padding: 20px; box-sizing: border-box; } header { padding: 20px 0; margin-bottom: 20px; text-align: center; } header h3 { line-height: 1; font-weight: normal; font-size: 28px; } .main { /*overflow: hidden;*/ } /* 用 clearfix 清除浮动，防止 .item 撑破父容器 */ .main:after { content: ''; clear: both; display: block; } .main .item { width: 210px; height: 210px; margin: 0 30px 30px 0; display: flex; position: relative; background-color: #FFF; float: left; box-shadow: 2px 2px 5px #CCC; } /* hover 时用><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .heart { width: 200px; height: 300px; /*border: 1px solid #000;*/ margin: 100px auto; position: relative; } /* 左半：红色圆角方块，逆时针旋转 45°，形成左心房 */ .heart::before, .heart::after { content: "左一半"; width: 100%; height: 100%; position: absolute; background-color: red; left: 0; top: 0; border-radius: 100px 100px 0 0; transform: rotate(-45deg); text-align: center; line-height: 100px; color: yellow; font-size: 30px; font-family: "MIcrosoft Yahei"; } /* 右半：同样的方块，向右平移 71px 并顺时针旋转 45°，形成右心房 */ .heart::after { content: "右一半"; left: 71px; transform: rotate(45deg); } </style> </head> <body> <div class="heart"> </div> </body> </html>

关键点解读：

  • .heart::before与.heart::after都是宽高 100% 的红色圆角方块（border-radius: 100px 100px 0 0圆的是上边两个角）。
  • ::before旋转-45deg，::after旋转45deg，两者顶角相交，从视觉上看就是一个倒置的心形。
  • 改变.heart::after的left值（示例为71px），即可调节左右两半的重叠程度，控制心形的胖瘦——这就是原文档所说的"改变 left 值，即可叠起来"。
  • 两个伪元素的content里写了"左一半 / 右一半"辅助文字，实际使用时可去掉，并给.heart外层容器留出旋转所需的空间。

五、要点总结与复用建议

  1. 圆角三件套：border-radius的单个属性（border-top-left-radius等）、斜杠语法（水平/垂直半径）、顺时针多值语法（缺值取对角），是本文所有图形的基础，务必熟记 02-CSS基础/11-CSS3属性详解（一）.md 中的规则。
  2. 百分比按方向计算：border-radius: 50%在不同宽高的盒子上产生的是椭圆而非正圆，需要"正圆"时优先用50%（宽高相等）或显式写宽/2 高/2。
  3. 宽高为 0 + 边框 = 三角形：想画指向任何方向的三角/箭头/气泡尾巴，用border-width配合border-color: transparent即可，无需图片素材。
  4. 伪元素拼图：::before/::after+position: absolute是叠加图形（阴阳鱼眼、对话尾巴、爱心两瓣）的标准手段；旋转用transform: rotate()，错位用left/right微调。
  5. 可直接复用的场景：圆角按钮、头像圆形化（border-radius: 50%）、Tab 箭头、消息气泡、loading 饼环、装饰性心形等，都可从本文的 27 例中直接改造。

以上全部代码都来自本仓库 02-CSS基础/17-CSS3的常见边框汇总.md，读者可结合 02-CSS基础 目录下的其他 CSS3 教程（11-CSS3属性详解（一）.md、13-CSS3属性：Flex布局图文详解.md）继续深入，把 CSS3 的视觉能力真正变成自己的生产力。

  • 文档
  • 教程
  • 前端

【免费下载链接】Web

千古前端图文教程，超详细的前端入门到进阶知识库。从零开始学前端，做一名精致优雅的前端工程师。

项目地址：https://gitcode.com/gh_mirrors/we/Web
点击查看免费下载

相关推荐

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

标签： 网站建设 企业官网 项目流程 UI设计 前端开发

热门文章

文章分类

标签云

网站建设 响应式设计 用户体验 SEO优化 前端开发 小程序 电商平台 性能优化

相关文章

您可能感兴趣的其他内容

SpringAI枚举限模高效调用法：TaoToken统一Key接入实践
2026/10/1 6:56:36 网站建设

SpringAI枚举限模高效调用法：TaoToken统一Key接入实践

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …...

阅读更多 →
FPGA学习（二）用Verilog实现LED流水灯：从VSCode到TaoToken的完整配置
2026/10/1 6:56:35 网站建设

FPGA学习（二）用Verilog实现LED流水灯：从VSCode到TaoToken的完整配置

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …...

阅读更多 →
DMA与磁盘物理结构的时序耦合原理及计算
2026/10/1 6:55:40 网站建设

DMA与磁盘物理结构的时序耦合原理及计算

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …...

阅读更多 →

需要专业的网站建设服务？

联系我们获取免费的网站建设咨询和方案报价，让我们帮助您实现业务目标

立即咨询