整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、实现三角形
#top-triangle {
width: 0px;
height: 0px;
border: 20px solid transparent;
border-bottom: 20px solid pink;
}
#right-triangle {
width: 0px;
height: 0px;
border: 20px solid transparent;
border-left: 20px solid pink;
}
#bottom-triangle {
width: 0px;
height: 0px;
border: 20px solid transparent;
border-top: 20px solid pink;
}
#left-triangle {
width: 0px;
height: 0px;
border: 20px solid transparent;
border-right: 20px solid pink;
} <div id="top-triangle"></div>
<p></p>
<div id="bottom-triangle"></div>
<p></p>
<div id="right-triangle"></div>
<p></p>
<div id="left-triangle"></div>
<p></p>效果预览
实现三角形
2、实现对话框
.left,
.right {
position: relative; /*后面移动会盒子位置*/
display: table;
min-height: 40px;
text-align: center;
background-color: #9eea6a;
margin: 0;
border-radius: 7px;
}
.left {
left: 10px;
}
.left::before,
.right::after {
position: absolute;
display: inline-block;
content: "";
width: 0px;
height: 0px;
border: 8px solid transparent;
top: 15px; /*移到中间*/
}
.left::before {
border-right-color: #9eea6a;
left: -16px;
}
.right::after {
border-left-color: #9eea6a;
right: -16px;
}
.left p,
.right p {
padding: 0px 10px;
}
.right {
right: -150px;
}<div class="left">
<p>你好啊</p>
</div>
<div class="right">
<p>好久不见~</p>
</div>实现对话框
3、实现箭头
.box {
position: relative;
width: 200px;
height: 50px;
background-color: pink;
}
.box::before {
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid black;
border-bottom-color: transparent;
border-right-color: transparent;
transform: translate(-50%, -50%) rotate(-45deg);
left: 20px;
top: 50%;
}
<div class="box"></div>
黑色部分是箭头
4、分割线
* {
padding: 0;
margin: 0;
}
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
<p class="spliter">分割线</p>
分割线预览效果
悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法。
css选择除了我们常见的也是使用频率最高的class选择器，id选择器，属性选择器，派生选择器等之外，还有重要的一类，是根据元素的状态或者元素中特别的内容来选从HTML文档的DOM树中获取元素，就两种就是伪类和伪元素，他们使用“：”或者“：：”来选择。
伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和DOM进行交互的时候，元素可以获得或者失去一个伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素。
单冒号(:)用于 CSS3 伪类，双冒号(::)用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
所以，如果你的网站只需要兼容 webkit、firefox、opera 等浏览器，建议对于伪元素采用双冒号的写法，如果不得不兼容 IE 浏览器，还是用 CSS2 的单冒号写法比较安全。
下面是根据用途分类的伪类总结图和根据冒号分类的伪元素总结图：
CSS（层叠样式表）中，伪类（pseudo-class）和伪元素（pseudo-element）是用于选择特定元素或元素状态的机制。它们允许你再不修改 HTML 结构的情况下，通过样式来修改元素的外观和行为。虽然它们看起来相似，但实际上有一些区别。
伪类（Pseudo-classes）：
伪类是用于选择元素的特定状态或行为的标识。它们以冒号（:）开头，用于在选择器中指定元素的状态。常见的伪类包括 :hover（鼠标悬停时）、:active（被激活时）、:focus（获得焦点时）、:nth-child（选择特定子元素序号）等。
示例：
a:hover {
color: blue; /* 当鼠标悬停在链接上时改变颜色 */
}
伪元素（Pseudo-elements）：
伪元素用于选择元素的特定部分，例如元素的内容、边框等。它们以双冒号（::）开头，用于在选择器中创建一个虚拟的元素，以便对其应用样式。常见的伪元素包括 ::before（在元素内容前插入内容）、::after（在元素内容后插入内容）、::first-line（选择第一行文本）等。
示例：
p::before {
content: ">> "; /* 在段落前插入内容 */
}
区别：
1.语法差异：伪类以单冒号开头（例如 :hover），而伪元素以双冒号开头（例如 ::before）。然而，在某些情况下，一些早期版本的伪元素也可以使用单冒号。
2.应用范围：伪类选择元素的特定状态或行为，而伪元素选择元素的特定部分或生成虚拟元素。
3.浏览器兼容性：某些较旧的浏览器可能不支持某些伪元素或伪类。因此，在使用时需要考虑浏览器兼容性。
总之，伪类和伪元素为开发者提供了更多的样式控制和灵活性，使得可以针对特定情况下的元素状态和结构进行样式化处理。
*请认真填写需求信息，我们会在24小时内与您取得联系。
