只用一个 HTML 元素可以写出多少形状？——伪元素篇（上）

news2024/12/23 9:35:19

只用一个 div 元素，我们已经通过四个篇章写了很多形状。

首先，我们通过对这个 div 的宽度与高度的直接控制，轻松写出矩形和正方形，并结合 transform 的 skew 方法写出了平行四边形与菱形。

其次，我们通过对边框的灵活运用，与宽度和高度相结合，成功写出了各种各样的三角形和梯形。

再次，我们结合圆角边框的灵活使用，写出了圆形与椭圆形等由弧形组成的形状，也可以和直线配合写出扇形或者吃豆人等个性形状。

最后，我们通过对阴影属性的灵活控制，我们可以使用类似于控制每一个像素点的方式写出更加复杂的形状。

同时，阴影属性的引入，我们在理论上已经可以写出一切形状，甚至只用一个 div 元素就可以通过控制每一个像素点画出一张复杂图片。

然而，我们在上一个篇章，一共使用了 30 个阴影才写出了一个相对简单的太空入侵者的图案。并且每一个阴影都是和元素本身的形状是一样的，做不到每一个元素在形状方面个性化。

那么今天，我们就使用伪元素，用更加灵活轻松的方式来写出各种各样的形状吧！

一、伪元素

伪元素是一个附加至选择器末的关键词，允许我们对被选择元素的特定部分修改样式。

截止到今天，一共有 15 个伪元素：

  • ::before：创建一个伪元素，作为所选元素的第一个子元素。

  • ::after：创建一个伪元素，作为所选元素的最后一个子元素。

  • ::first-letter：将样式应用于区块容器第一行的第一个字母，但仅当其前面没有其他内容（例如图像或行内表格）时才有效。

  • ::first-line：在某块级元素的第一行应用样式。

  • ::placeholder：表示 <input> 或 <textarea> 元素中的占位文本。

  • ::selection：应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

  • ::cue：匹配所选元素中的 WebVTT 提示。

  • ::file-selector-button：代表 type="file" 的 <input> 的按钮。

  • ::marker：匹配列表的标记框（通常为一个符号或数字）。

  • ::part()：表示在阴影树中任何匹配 part 属性的元素。

  • ::slotted()：用于选定那些被放在 HTML 模板中的元素。

  • ::backdrop：在任何处于全屏模式的元素下的即刻渲染的盒子。

  • ::grammar-error：应用于浏览器标识为语法错误的文本段。

  • ::spelling-error：表示浏览器标记为不正确拼写的文本段。

  • ::target-text：代表了浏览器在支持文本片段技术时所滚动到的文字。

说明：

  1. ::backdrop、::grammar-error、::spelling-error、::target-text 四个为实验性技术，在 W3C 确认定稿之前，我们都继续做观望，而不做过多展开；

  2. ::cue、::part()、::slotted() 三个伪元素比较冷门，实际开发中几乎用不上，这里也不做展开了；

  3. ::file-selector-button 和 ::marker 两个伪元素在实际开发中用的比较少，就只做简单介绍了。

1. before 和 after

::before 和 ::after 两个伪元素，分别作为所选元素的第一个子元素和最后一个子元素，通常用于为具有 content 属性的元素添加修饰内容。默认情况下，它是行向布局的。

div::before {
  content: '';
}
div::after {
  content: '';
}

可以看到，伪元素的使用方法是附加在选择器的末端，这部分的样式仅仅控制被该伪元素指定的部分内容的样式。

代码中，我们写了 ::before 和 ::after 两个伪元素，这两个伪元素需要在 CSS 中使用 content 属性激活。

通过浏览器的控制台查看渲染后的 DOM 结构，看到咱们的 div 元素中多了 ::before 和 ::after 两个伪元素。

为了看的足够清晰，我们给这个 div 元素添加一些文字信息：

<div>这里是 div 标签中的内容</div>

再次检查浏览器的控制台可以看到渲染后的 DOM 结构如下：

 

接下来，我们再在两个伪元素的 content 属性中都添加一些文字信息：

div::before {
  content: '这里是 before 中的内容';
}
div::after {
  content: '这里是 after 中的内容';
}

现在我们再次检查浏览器的控制台，我们惊讶的看到渲染后的 DOM 结构依然如下：

不同的是，在浏览器主窗口中呈现出来的显示效果是按照顺序显示出来的：

当我们在浏览器的控制台中选中其中一个伪元素，在浏览器主窗口中也会标识出对应的元素信息，同时我们可以看到该伪元素的 CSS 控制信息：

现在我们尝试把这两个伪元素都控制一下样式：

div::before {
  display: block;
  color: red;
  content: '这里是 before 中的内容';
}
div::after {
  display: block;
  color: blue;
  content: '这里是 after 中的内容';
}

我们大胆的控制这两个伪元素，将其设置为块级元素（最新叫法为块盒），并且分别设置文字颜色为红色与蓝色。得到效果如下：

还是一样的，我们在浏览器的控制台中选中其中一个伪元素，然后观察在浏览器主窗口中标识出的对应元素信息，以及该伪元素的 CSS 控制信息：

很明显，伪元素完全受到 css 控制，彷佛就是一个直接写在 html 中的元素。

这里，我们可以得到一如下结论：

  • ::before 伪元素永远是元素中的第一个子元素，::after 伪元素永远是元素中的最后一个子元素，两个伪元素均需要 content 属性将其激活，伪元素的内容放在 content 属性中；

  • ::before 和 ::after 两个伪元素默认为行内元素（最新叫法为行盒），可以通过 CSS 进行任意控制，就相当于写在元素中的两个 HTML 子标签。

::before 和 ::after 两个伪元素是我们画各种形状的篇章中，使用最多的两个伪元素，也是实际开发中使用最多的伪元素。在后面画形状的文中，我们还会不断使用。

这里，我们先对别的伪元素做一个简单的介绍。

2. first-letter

::first-letter 伪元素将样式应用于区块容器第一行的第一个字母，但仅当其前面没有其他内容（例如图像或行内表格）时才有效。

咱们在 div 元素中放入一段文字：

<div>将梦想悬挂于枝头，在夏季的丰盛中饱满，绽放；为梦想披星戴月，刷新生命的温度。那些因梦想蜕变了的灵魂，历经时光坎坷，痛苦挣扎，依然在枝头放歌，温暖了生命如花的影子。前世，储蓄梦想；今生，演绎铿锵。</div>

为了显示效果，控制 div 的宽度为 500px，并给一个淡蓝色的背景。

width: 500px;
background: lightblue;

现在显示一段正常的文字：

现在我们给这个 div 添加上 ::first-letter 伪元素：

div::first-letter {
  font-size: 72px;
  color: red;
}

这里，我们设置 ::first-letter 伪元素的样式为字体大小为 72px，文字颜色为红色。得到如下效果：

明显的看到，这段文字的第一个字，其显示样式发生了变化。并且，在浏览器的控制台中是无法找到的，而且伪元素的样式控制中，也不需要 content 属性来进行激活。

3. first-line

::first-line 伪元素将样式应用于某块级元素的第一行应用样式。

和 ::first-letter 伪元素中的样例一样，我们仅仅换成 ::first-line 伪元素：

div::first-line {
  font-size: 72px;
  color: red;
}

得到的效果如下：

明显的看到，这段文字的第一行，其显示样式发生了变化。

4. selection

::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

和 ::first-letter 伪元素中的样例一样，我们仅仅换成 ::selection 伪元素：

div::selection {
  font-size: 72px;
  color: red;
}

得到的效果如下：

我们可以看到，选中的文字呈现了红色，但是文字大小不变。这是因为，在 ::selection 伪元素中只能使用 color、background-color、cursor、caret-color、outline、text-decoration、text-emphasis-color、text-shadow 这八个控制文字的 CSS 属性，其它 CSS 属性会被自动忽略。

注意：background-image 会如同其他属性一样被忽略。

5. placeholder

::placeholder 伪元素表示 <input> 或 <textarea> 元素中的占位文本。

我们在 HTML 中写入一个 input 元素：

<input type="text" placeholder="这里是我们的占位符！" />

我们通过 placeholder 属性设置了占位符，默认显示效果如下：

然后，我们使用 ::placeholder 伪元素改变占位符中的文字颜色为红色：

input::placeholder {
  color: red;
}

这样就可以控制占位符的文字样式了。

6. file-selector-button

::file-selector-button 伪元素代表 type="file" 的 <input> 的按钮。

我们在 HTML 中写入一个 type="file" 的 input 元素：

<input type="file" />

我们给这个 input 设置文字颜色为蓝色：

input {
  color: blue;
}

显示效果如下：

可以看到，我们控制的文字颜色是文件名部分的文字颜色，按钮中的文字颜色还是默认的黑色。

然后，我们使用 ::file-selector-button 伪元素改变按钮中的文字颜色为红色：

input::file-selector-button {
  color: red;
}

这样就可以控制按钮的文字样式了。

7. marker

::marker 伪元素匹配列表的标记框（通常为一个符号或数字）。

我们在 HTML 中写入一个无序列表：

<ul>
  <li>造纸术</li>
  <li>印刷术</li>
  <li>指南针</li>
  <li>火药</li>
  <li>杂交水稻</li>
</ul>

默认效果如下：

可以看到，无序列表中每一项使用的默认标记框是一个黑点，现在我们想要让其变成自定义的标记框，直接使用 ::marker 伪元素：

li::marker {
  content: '→';
}

在 ::marker 伪元素中，我们也是使用 content 属性对自定义标记框进行声明，效果如下：

无论是无序列表还是有序列表，列表项使用的都是 li 标签。熟悉推广的宝子们都知道，li 标签对 SEO 非常不友好。所以我们写列表的时候，更多使用的是 dl 列表。

于是，我们把 HTML 中的列表换成 dl 列表：

<dl>
  <dt>我国五大发明</dt>
  <dd>造纸术</dd>
  <dd>印刷术</dd>
  <dd>指南针</dd>
  <dd>火药</dd>
  <dd>杂交水稻</dd>
  <dt>我国五大淡水湖</dt>
  <dd>鄱阳湖</dd>
  <dd>洞庭湖</dd>
  <dd>太湖</dd>
  <dd>洪泽湖</dd>
  <dd>巢湖</dd>
  <dt>五岳</dt>
  <dd>泰山</dd>
  <dd>衡山</dd>
  <dd>华山</dd>
  <dd>恒山</dd>
  <dd>嵩山</dd>
</dl>

dl 列表中，可以使用 dt 标签定义列表标题，然后使用 dd 标签定义列表项，效果如下：

然后，我们直接对 dd 标签使用 ::marker 伪元素：

dd::marker {
  content: '→';
}

结果我们惊讶的发现，没有起效果：

这是因为，::marker 伪元素作用在任何设置了 display: list-item 的元素或伪元素上，例如 li 和 summary 元素。而 dd 元素默认情况下是没有设置 display: list-item 属性的，于是我们手动给 dd 元素设置 display: list-item 属性：

dd {
  display: list-item;
}

这样一来，我们的 ::marker 伪元素就生效了：

最后要说的是，::marker 伪元素不一定非要使用 content 属性，对于有序列表和无序列表来说，由于默认自带列表的标记框，于是我们可以直接控制其显示样式：

li::marker {
  font-size: 72px;
  color: red;
}

如此这般，我们直接控制标记框的样式，效果如下：

 

在将 ::marker 作为选择器的规则中，只能使用某些 CSS 属性：

  • 所有的字体属性

  • white-space 属性；

  • color 属性；

  • text-combine-upright、unicode-bidi 和 direction 属性；

  • content 属性；

  • 所有的 animation 和 transition 属性。

说明：规范指出，将来可能会支持其他 CSS 属性，让我们拭目以待吧！

二、正五边形

还记得我在欧洲杯的时候写过一篇用纯前端写一个足球的文章。

文章中，我们已经明确分析过，要写一个正五边形，只需要写一个等腰梯形和一个等腰三角形即可：

​

通过计算，得到如下数值：

​

先写一个上底长下底短的等腰梯形：

width: 200px;
height: 0;
border-top: 190.35px solid red;
border-right: 61.8px solid transparent;
border-left: 61.8px solid transparent;

然后使用 ::before 伪元素写一个等腰三角形，并通过定位控制到对应的位置：

div::before {
  position: absolute;
  top: -285px;
  left: -61.8px;
  display: block;
  width: 0;
  height: 0;
  border-right: 161.8px solid transparent;
  border-bottom: 95.1px solid red;
  border-left: 161.8px solid transparent;
  content: '';
}

于是，一个正五边形就写出来了：

​

之所以在这里重申了正五边形的写法，主要目的是要阐述几个观点：

  1. 在伪元素中，::before 和 ::after 两个伪元素，相当于两个子标签，使用 content 属性激活之后，可以完全当作两个 span 标签使用；

  2. 结合我们前面的四个篇章，相当于是拥有了三个标签，每一个标签都可以写出前面四个篇章中的任何一个形状，三个形状相结合之后，又可以得到更多的形状；

  3. ::before 和 ::after 两个伪元素是原元素的子标签，所以只需要通过对个元素设置一个非 static 的定位，就可以直接对这两个伪元素进行非常容易的定位。

关于定位的知识，我曾经在用纯前端写一个足球中做过讲解。

  • position 属性是控制元素定位的，默认值为 static。

  • 若一个元素的 position 属性值为绝对定位（absolute），即可通过 top、bottom 两个属性控制该元素的竖直偏移，也可以通过 right、left 两个属性控制该元素的水平偏移。

  • 若没有设置 top、bottom 两个属性，则竖直方向的偏移和 position 的值为 static 显示的一样；若没有设置 right、left 两个属性，则水平方向的偏移和 position 的值为 static 显示的一样。

  • 无论水平方向还是竖直方向，只要设置了偏移属性，那么就需要看该元素的父元素的 position 是什么值。若父元素的 position 不是 static，那么就会以该父元素的容器范围为基准开始偏移；若父元素的 position 是 static，那么就会无视该父元素的管理范围，继续向上寻找“爷爷”元素，直到找到 position 不是 static 的元素，或者直接以 body 元素为基准。

如此，通过再次画正五边形，顺便带领大家复习了定位的知识，也阐述了使用伪元素画出更多形状的方法。

那么下一篇章，我们就引入一些例子来实战一下吧！让我们敬请期待！

关注“临界程序员”，为您送上更多精彩内容！

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

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

相关文章

iphone异常问题常用修复方法

iphone异常问题常用修复方法

作为智能手机的领军者&#xff0c;iPhone凭借其卓越的性能和稳定的系统赢得了全球用户的青睐。然而&#xff0c;就像任何电子设备一样&#xff0c;iPhone在使用过程中也难免会遇到各种异常问题&#xff0c;如卡顿、无法充电、应用闪退等。这些问题虽然令人头疼&#xff0c;但大…
阅读更多...
linux之ELK

linux之ELK

ELK概述 ELK是一套开源的日志分析系统&#xff0c;由elasticsearchlogstashKibana组成。 官网说明:https://www.elastic.co/cn/products 首先: 先一句话简单了解E,L,K这三个软件 elasticsearch: 分布式搜索引擎 logstash: 日志收集与过滤&#xff0c;输出给elasticsearch Kiban…
阅读更多...
校园快递代取系统设计与实现(源码+lw+部署文档+讲解等)

校园快递代取系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图详细视频演示技术栈系统测试为什么选择我官方认证玩家&#xff0c;服务很多代码文档&#xff0c;百分百好评&#xff0c;战绩可查&#xff01;&#xff01;入职于互联网大厂&#xff0c;可以交流&#xff0c;共同进步。有保障的售后 代码参考数据库参…
阅读更多...
Windows搭建我的世界MC服务器 【Minecraft外网联机教程】

Windows搭建我的世界MC服务器 【Minecraft外网联机教程】

目录 ⛳️推荐 1. 搭建我的世界服务器 1.1 服务器安装java环境 1.2 配置服务端 1.3 创建我的世界服务器 2. 局域网联机测试 3. 安装cpolar内网穿透 4. 公网联机Minecraft 5. 配置固定远程联机端口地址 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通…
阅读更多...
【启明智显技术分享】工业级HMI芯片Model系列GUI合成到项目中的指南

【启明智显技术分享】工业级HMI芯片Model系列GUI合成到项目中的指南

在工业自动化、智能终端HMI、车载仪表盘等领域&#xff0c;高性能的HMI&#xff08;人机界面&#xff09;芯片是不可或缺的核心组件。启明智显推出的Model系列&#xff08;如Model3C、Model3、Model4&#xff09;HMI芯片&#xff0c;以其卓越的性能和广泛的应用领域&#xff0c…
阅读更多...
大模型学习应用 2：快速上手大模型基于langchain实现RAG检索应用

大模型学习应用 2：快速上手大模型基于langchain实现RAG检索应用

快速上手大模型基于langchain实现RAG检索应用 - 项目作业 目录 准备工作镜像选择算力选择安装包数据说明提示参考链接 Task1 申请 api 后&#xff0c;使用 langchain 导入大模型&#xff0c;并打印出大模型信息Task2 使用 langchian 加载数据&#xff0c;并把数据打印出来Task…
阅读更多...
WebSocket 快速入门

WebSocket 快速入门

WebSocket是什么 WebSocket 是基于 TCP 的一种新的应用层网络协议。它实现了浏览器与服务器全双工通信&#xff0c;即允许服务器主动发送信息给客户端。因此&#xff0c;在 WebSocket 中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性…
阅读更多...
Linux系统中安装Git（详细教程）

Linux系统中安装Git（详细教程）

在Linux系统中安装Git&#xff0c;可以通过多种方式来实现&#xff0c;主要包括使用包管理器安装和从源代码编译安装。以下是详细的安装步骤&#xff1a; 一、使用包管理器安装&#xff08;不建议该方式&#xff09; 大多数Linux发行版都提供了包管理器&#xff0c;如Debian/…
阅读更多...
90%的人都在用这7个图片转pdf技巧，转换速度很快！

90%的人都在用这7个图片转pdf技巧，转换速度很快！

图片怎么转换成pdf格式&#xff1f;图片和pdf格式是两种完全不一样的格式&#xff0c;但是如果想要将图片转换成pdf格式还是蛮容易的&#xff0c;常见的方法就有数十种了。 本文整理了几种常见的图片转pdf的方法&#xff0c;包括图片转pdf在线方法&#xff0c;有需要的朋友可以…
阅读更多...
取证工具 ElcomSoft iOS Forensics Toolkit: 在 Windows 中加载 HFS 镜像

取证工具 ElcomSoft iOS Forensics Toolkit: 在 Windows 中加载 HFS 镜像

天津鸿萌科贸发展有限公司是 ElcomSoft 系列取证软件的授权代理商。 Elcomsoft iOS Forensics Toolkit 功能简介 Elcomsoft iOS Forensics Toolkit 软件工具包适用于取证工作&#xff0c;对 iPhone、iPad 和 iPod Touch 设备执行完整文件系统和逻辑数据采集。对设备文件系统制…
阅读更多...
【Linux操作系统】基础IO

【Linux操作系统】基础IO

目录 一、接口使用1.1 铺垫知识1.2 C接口使用1.3 系统接口使用 二、认识fd三、缓冲区四、文件系统五、软硬连接六、动静态库6.1 静态库的制作和使用6.1 动态库的制作和使用 七、理解动态库加载 一、接口使用 1.1 铺垫知识 文件文件内容文件属性 。一个文件如果它的文件内容为…
阅读更多...
AI产品经理如何入门?零基础入门到精通，收藏这一篇就够了

AI产品经理如何入门?零基础入门到精通，收藏这一篇就够了

现在做产品经理&#xff0c;真的挺累的。 现在产品越来越难做&#xff0c;晋升困难&#xff0c;工资迟迟不涨……公司裁员&#xff0c;产品经理首当其冲&#xff01;&#xff01; 做产品几年了&#xff0c;还没升职&#xff0c;就先到了“职业天花板”。 想凭工作几年积累的…
阅读更多...
linux被植入木马排查思路

linux被植入木马排查思路

linux被植入木马排查思路 一、是否侵入检查 1&#xff09;检查系统登录日志 last命令 2&#xff09;检查系统用户 1、检查是否有异常用户 cat /etc/passwd 2、查看是否产生了新用户、uid和gid为0的用户 grep "0" /etc/passwd 3、查看passwd的修改时间&#xf…
阅读更多...
CY7C68000 实现High Speed USB2 UART

CY7C68000 实现High Speed USB2 UART

已经在Malogic PFGA Board 上用CY7C68000 实现High Speed USB2UART&#xff0c;店铺还上架了 ULPI &#xff08;USB3300&#xff09;的 TestBench 和ModelSim 验证环境&#xff0c;刚刚写出来的&#xff0c;其实效果和UTMI差不多&#xff0c; 比UTMI麻烦一些&#xff0c;需要写…
阅读更多...
k8s篇之kubectl安装命令自动补全插件

k8s篇之kubectl安装命令自动补全插件

1. 简介 常见情况&#xff1a;在部署生产环境或者测试环境的k8s集群时&#xff0c;常因输入命令繁琐&#xff0c;使得执行相关k8s操作排错时麻烦&#xff0c;以下自动补全插件即可解决这一问题。 以下安装亲测有效 2. 安装 安装bash completion yum install -y bash-comple…
阅读更多...
车载以太网交换机入门基本功（3）—VLAN 转发

车载以太网交换机入门基本功（3）—VLAN 转发

在《车载以太网交换机入门基本功&#xff08;2&#xff09;》中提到&#xff0c;报文通过携带Tag字段&#xff0c;表明报文所属的VLAN。本文将介绍携带Tag报文在VLAN下的转发过程。而在实际转发过程中&#xff0c;交换机的端口属性起到关键作用。 交换机端口属性 交换机的端口…
阅读更多...
计算机毕业设计选题推荐-地震数据分析与预测-Python爬虫可视化

计算机毕业设计选题推荐-地震数据分析与预测-Python爬虫可视化

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…
阅读更多...
Java语言程序设计——篇十五（2）

Java语言程序设计——篇十五（2）

&#x1f33f;&#x1f33f;&#x1f33f;跟随博主脚步&#xff0c;从这里开始→博主主页&#x1f33f;&#x1f33f;&#x1f33f; 欢迎大家&#xff1a;这里是我的学习笔记、总结知识的地方&#xff0c;喜欢的话请三连&#xff0c;有问题可以私信&#x1f333;&#x1f333;&…
阅读更多...
如何在C++ QT 程序中集成cef3开源浏览器组件去显示网页？

如何在C++ QT 程序中集成cef3开源浏览器组件去显示网页？

目录 1、问题描述 2、为什么选择cef3浏览器组件 3、cef3组件的介绍与下载 4、将cef3组件封装成sdk 5、如何使用cef3组件加载web页面 5.1、了解CefApp与CefClient 5.2、初始化与消息循环 5.3、如何创建浏览器 5.4、重载CefClient类 6、在qt客户端集成cef组件 7、最后…
阅读更多...
国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型

国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型

Open AI大模型 特点&#xff1a; 多模态能力&#xff1a;如GPT-4o&#xff0c;能接受文本、音频、图像作为组合输入&#xff0c;并生成任意形式的输出。 情感识别与回应&#xff1a;具备情感识别能力&#xff0c;能根据对话者的情绪做出有感情的回应。 几乎无延迟&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023