[CSS-Rezept] Verwenden Sie den reinen CSS-Stil, um Pluszeichen und andere Symbolsymbole zu realisieren

1. Plus-Symbol ➕

(1) Effektanzeige

(2) Rohstoffe

• Hauptsächlich wird der Pseudoklassenmechanismus von CSS verwendet, nämlich [::befor] und [::after]
• Und eine Beschriftung: [div], [p], [image], [view] usw. sind alle verfügbar
• Die beteiligten Attribute werden später im Detail beschrieben

(3) Kochen

1. Legen Sie das Etikett fest, nehmen Sie es als divBeispiel

<div class="add"></div>

2. Legen Sie den Etikettenstil fest

.add {
    
    
  /* 重点属性。absolute或者relative，主要是为了给伪类定位 */
  position: relative;
  width: 150rpx;
  height: 150rpx;
  /* 设置圆角 */
  border-radius: 50%;
  /* 设置边框及颜色 */
  border: 2rpx solid #5e5e5e;
  /* 设置背景底色 */
  background-color: #c9c9c9;
}

Wirkung:

3. Zeichnen Sie eine „horizontale“

Hier werden die Pseudoklasse before und ihr border-top zum Festlegen verwendet

.add::before {
    
    
  content: '';
  /* 使用绝对定位*/
  position: absolute;
  /* 通过left、top设置居中 */
  left: 50%;
  top: 80rpx;
  /* 左右长度 */
  width: 110rpx;
  margin-left: -55rpx;
  margin-top: -10rpx;
  /* 横线厚度 */
  border-top: 10rpx solid;
  /* 颜色 */
  color: #dfdfdf;
}

Wirkung:

4. Zeichnen Sie eine „Vertikale“

Hier werden die Pseudoklasse after und ihr border-bottom zum Festlegen verwendet

.add::after {
    
    
  content: '';
  /* 使用绝对定位*/
  position: absolute;
  /* 通过left、top设置居中 */
  left: 80rpx;
  top: 50%;
  /* 竖线高度 */
  height: 110rpx;
  margin-left: -10rpx;
  margin-top: -55rpx;
  /* 横线厚度 */
  border-left: 10rpx solid;
  /* 颜色 */
  color: #dfdfdf;
}

Wirkung:

5. Erweiterung

Sie können weiterhin Pseudoklassen wie Hover hinzufügen, um Mausüberlagerungsstile, Klickstile usw. zu erreichen.

Fortsetzung folgt...