尧图网站建设 
文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本篇文章是《千古前端图文教程》中 CSS3 边框知识的实战总结核心聚焦border-radius圆角属性与border边框宽度/颜色的组合玩法从最简单的整圆、拱形、半圆到需要理解水平半径/垂直半径的椭圆系图形再到用透明边框拼出的三角形、饼形、阴阳图和 QQ 对话气泡最后用伪元素叠加实现纯 CSS 爱心。读完本文你将掌握border-radius的完整取值规则含顺时针赋值与对角取值、利用透明边框绘制任意方向三角形的原理以及用伪元素叠加法拼出复杂图形的通用思路并可直接把文中代码复制到本地浏览器验证效果。本文内容主体来自 02-CSS基础/17-CSS3的常见边框汇总.mdborder-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 langen head meta charsetUTF-8 titleCSS3 边框/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 langen meta charsetUTF-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 classheart /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外层容器留出旋转所需的空间。五、要点总结与复用建议圆角三件套border-radius的单个属性border-top-left-radius等、斜杠语法水平/垂直半径、顺时针多值语法缺值取对角是本文所有图形的基础务必熟记 02-CSS基础/11-CSS3属性详解一.md 中的规则。百分比按方向计算border-radius: 50%在不同宽高的盒子上产生的是椭圆而非正圆需要正圆时优先用50%宽高相等或显式写宽/2 高/2。宽高为 0 边框 三角形想画指向任何方向的三角/箭头/气泡尾巴用border-width配合border-color: transparent即可无需图片素材。伪元素拼图::before/::afterposition: absolute是叠加图形阴阳鱼眼、对话尾巴、爱心两瓣的标准手段旋转用transform: rotate()错位用left/right微调。可直接复用的场景圆角按钮、头像圆形化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点击查看免费下载相关推荐千古前端图文教程CSS3 Web 字体font-face实战详解——自定义字体与图标字体的完整方案千古前端图文教程CSS3 Web 字体font face实战详解——自定义字体与图标字体的完整方案 导读 本文是「千古前端图文教程」中 CSS3 进阶部文档教程前端千古前端图文教程CSS3 动画详解——transition 过渡、transform 转换与 animation 动画实战千古前端图文教程CSS3 动画详解——transition 过渡、transform 转换与 animation 动画实战 本篇文章是「千古前端图文教程」中文档教程前端Slate 历史记录插件 withHistory 深入解析为编辑器接入撤销与重做能力Slate 历史记录插件 withHistory 深入解析为编辑器接入撤销与重做能力 withHistory 是 Slate 官方子库 slate histo文档教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 千古前端图文教程：CSS3 边框与圆角实战汇总——27 种图形与纯 CSS 爱心的完整实现
文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载导读本篇文章是《千古前端图文教程》中 CSS3 边框知识的实战总结核心聚焦border-radius圆角属性与border边框宽度/颜色的组合玩法从最简单的整圆、拱形、半圆到需要理解水平半径/垂直半径的椭圆系图形再到用透明边框拼出的三角形、饼形、阴阳图和 QQ 对话气泡最后用伪元素叠加实现纯 CSS 爱心。读完本文你将掌握border-radius的完整取值规则含顺时针赋值与对角取值、利用透明边框绘制任意方向三角形的原理以及用伪元素叠加法拼出复杂图形的通用思路并可直接把文中代码复制到本地浏览器验证效果。本文内容主体来自 02-CSS基础/17-CSS3的常见边框汇总.mdborder-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 langen head meta charsetUTF-8 titleCSS3 边框/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 langen meta charsetUTF-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 classheart /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外层容器留出旋转所需的空间。五、要点总结与复用建议圆角三件套border-radius的单个属性border-top-left-radius等、斜杠语法水平/垂直半径、顺时针多值语法缺值取对角是本文所有图形的基础务必熟记 02-CSS基础/11-CSS3属性详解一.md 中的规则。百分比按方向计算border-radius: 50%在不同宽高的盒子上产生的是椭圆而非正圆需要正圆时优先用50%宽高相等或显式写宽/2 高/2。宽高为 0 边框 三角形想画指向任何方向的三角/箭头/气泡尾巴用border-width配合border-color: transparent即可无需图片素材。伪元素拼图::before/::afterposition: absolute是叠加图形阴阳鱼眼、对话尾巴、爱心两瓣的标准手段旋转用transform: rotate()错位用left/right微调。可直接复用的场景圆角按钮、头像圆形化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点击查看免费下载相关推荐千古前端图文教程CSS3 Web 字体font-face实战详解——自定义字体与图标字体的完整方案千古前端图文教程CSS3 Web 字体font face实战详解——自定义字体与图标字体的完整方案 导读 本文是「千古前端图文教程」中 CSS3 进阶部文档教程前端千古前端图文教程CSS3 动画详解——transition 过渡、transform 转换与 animation 动画实战千古前端图文教程CSS3 动画详解——transition 过渡、transform 转换与 animation 动画实战 本篇文章是「千古前端图文教程」中文档教程前端Slate 历史记录插件 withHistory 深入解析为编辑器接入撤销与重做能力Slate 历史记录插件 withHistory 深入解析为编辑器接入撤销与重做能力 withHistory 是 Slate 官方子库 slate histo文档教程前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考