Was ist das von CSS festgelegte Randattribut?

Im Webdesign ist der Rahmen ein weit verbreitetes Element. Er kann Webelementen bestimmte visuelle Effekte verleihen und auch zur Trennung verschiedener Elemente verwendet werden. CSS (Cascading Style Sheets) stellt uns einige Eigenschaften zur Verfügung, um den Stil, die Farbe und die Breite des Rahmens festzulegen. Wie legt man also die Border-Eigenschaft in CSS fest? Dieser Artikel wird es Ihnen im Detail erklären.

1. border-style-Attribut

border-style-Attribut wird verwendet, um den Stil des Rahmens festzulegen. Es hat viele optionale Werte:

1. solid: durchgezogene Linie, was der Standardwert ist; ;
2. gepunktet: gepunktete Linie;
3. Groove: ähnlich dem dreidimensionalen Rilleneffekt;
4. Einsatz: ähnlich dem konkaven Effekt; Anfang: ähnlich dem konvexen Effekt.
5. Das Folgende ist ein Beispiel, das die Auswirkungen verschiedener Rahmenstile zeigt:

6. div {
       border-style: solid; /* 实线 */
   }
   
   div.dashed {
       border-style: dashed; /* 虚线 */
   }
   
   div.dotted {
       border-style: dotted; /* 点线 */
   }
   
   div.double {
       border-style: double; /* 双线 */
   }
   
   div.groove {
       border-style: groove; /* 凹槽效果 */
   }
   
   div.ridge {
       border-style: ridge; /* 凸起效果 */
   }
   
   div.inset {
       border-style: inset; /* 凹入效果 */
   }
   
   div.outset {
       border-style: outset; /* 凸出效果 */
   }

2. border-width-Attribut
7. Das border-width-Attribut wird verwendet, um die Breite des Rahmens festzulegen. Es hat auch viele optionale Werte, darunter dünn, mittel und dick, Sie können auch bestimmte Pixelwerte oder Prozentwerte definieren.
8. Das Folgende ist ein Beispiel, das die Wirkung unterschiedlicher Rahmenbreiten zeigt:

div {
    border-style: solid;
    border-width: medium; /* 默认宽度 */
}

div.thin {
    border-width: thin; /* 窄边框 */
}

div.thick {
    border-width: thick; /* 宽边框 */
}

div.custom {
    border-width: 5px; /* 自定义宽度 */
}

3. Das Attribut „Rahmenfarbe“ wird verwendet, um die Farbe des Rahmens festzulegen. Es kann den Farbnamen, den RGB-Wert usw. verwenden Zu definierender Hexadezimalwert.

Das Folgende ist ein Beispiel, das die Auswirkungen verschiedener Rahmenfarben zeigt:

div {
    border-style: solid;
    border-width: medium;
}

div.red {
    border-color: red; /* 红色边框 */
}

div.green {
    border-color: green; /* 绿色边框 */
}

div.blue {
    border-color: blue; /* 蓝色边框 */
}

div.custom {
    border-color: #ccc; /* 自定义颜色 */
}

4. Das Rahmenattribut kann gleichzeitig den Stil, die Breite und die Farbe des Rahmens festlegen. Die Reihenfolge der unterstützten Parameter ist : Rahmenbreite, Rahmenstil und Rahmenfarbe. Sie können auch die Abkürzungsform verwenden, z. B. „Rahmen: 1 Pixel durchgehend schwarz“, was bedeutet, dass die Rahmenbreite 1 Pixel beträgt, der Stil eine durchgezogene Linie ist und die Farbe Schwarz ist.

Das Folgende ist ein Beispiel, das die Wirkung des Randattributs zeigt:

div {
    border: 1px solid black; /* 简写形式 */
}

div.custom {
    border: 3px dotted #ccc; /* 自定义边框 */
}

Zusammenfassung

Im Webdesign ist der Rand ein wichtiges Element, das Webelementen bestimmte visuelle Effekte verleihen und auch zum Trennen verschiedener Elemente verwendet werden kann . Element. CSS bietet uns mehrere Eigenschaften zum Festlegen des Stils, der Breite und der Farbe des Rahmens, einschließlich „Border-Style“, „Border-Width“, „Border-Color“ und „Border“ usw. Verwenden Sie diese Eigenschaften, um auf einfache Weise verschiedene Rahmenstile zu implementieren.

Das obige ist der detaillierte Inhalt vonWas ist das von CSS festgelegte Randattribut?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!