整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、實現三角形
#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小時內與您取得聯系。
