Detaillierte Erläuterung einiger Beispielverwendungscodes von Border-Eigenschaften in CSS3

Es gibt drei Eigenschaften im Zusammenhang mit Border in CSS3: abgerundeter Randradius, Bildrand Randbild und mehrfarbiger Rand Randfarbe. Darunter ist der abgerundete Randradius eine häufig verwendete Eigenschaft Auf vielen Websites wird mittlerweile der Randradius verwendet, um abgerundete Ecken zu erstellen.

 /*我们可以分别给各边上色*/
  border-top-color: <color>/*给上边框上色*/
  border-right-color: <color> /*给右边框上色*/
  border-bottom-color:<color> /*给下边框上色*/
  border-left-color: <color> /*给左框上色*/

Das Obige zeigt, wie man den Rand eines Elements einfärbt. Jeder weiß, dass dies dem Rand eine einzigartige Farbe verleihen kann. Wenn wir dem Rand jedoch verschiedene Farben hinzufügen möchten, beispielsweise eine Verlaufsfarbe oder eine Farbe, kann unsere vorherige Methode nichts tun. Was sollten wir also tun, um einen solchen Effekt zu erzielen, CSS3? hat andere Methoden eingeführt. Ein eigenes Attribut für die Randfarbe, aber bisher unterstützen nur Firefox 3.0+-Browser dieses Attribut. Aus diesem Grund ist die Verwendung von CSS3-Rahmenfarben recht selten. Soweit ich weiß, gibt es kein Projekt, das die Rahmenfarben von CSS3 verwendet, um spezielle Rahmeneffekte zu erzielen. Der Begeisterung von uns CSS3-Enthusiasten, die verschiedenen Eigenschaften von CSS3 kennenzulernen, wird dies jedoch keinen Abbruch tun. Lassen Sie uns fortfahren und sehen, wie die Borderder-Farbe von CSS3 verwendet wird.

Werfen wir einen Blick auf die Schreibregeln seiner Grammatik

-moz-border-top-colors: <color> <color> <color>*; /*顶边边框*/
  -moz-border-right-colors:<color> <color> <color>*; /*右边边框*/
  -moz-border-bottom-colors: <color> <color> <color>*; /*底边边框*/
  -moz-border-left-colors: <color> <color> <color>*; /*左边边框*/

Von den oben genannten Grammatikregeln schreiben wir die vier Seiten des Elements separat, aber es gibt einen Unterschied Der Unterschied zu CSS2 besteht darin, dass wir in CSS3 „Border-Top-Colors“, „Border-Right-Colors“, „Border-Bottom-Colors“ und „Border-Left-Colors“ verwenden, wobei „Colors“ eine Pluralzahl ist, aber in CSS2 sind sie alle „Border-Top“. - Farbe, Farbe des rechten Rands, Farbe des unteren Rands, Farbe des linken Rands. Jeder muss sich daran erinnern. In CSS3 sind es „Farben“

Wenn Sie das border-color-Attribut von CSS3 verwenden und Ihre Rahmenbreite auf X px eingestellt ist, können Sie jeweils X für die Rahmenfarben verwenden Die Farbe ist derzeit ein px. Wenn Ihre Rahmenbreite auf 10 Pixel eingestellt ist und Sie nur drei oder vier Farben verwenden, füllt die letzte Farbe die Breite dahinter aus.

.demo {   
    width: 200px;
   height: 100px;
   border: 5px solid transparent;
   -moz-border-top-colors: red blue white white black;
   -moz-border-right-colors: red blue white white black;
   -moz-border-bottom-colors: red blue white white black;
   -moz-border-left-colors: red blue white white black;       
 }

Sie können dieses Attribut auch verwenden, um einen Verlaufsrandeffekt zu erstellen

.demo1 {    
      width: 200px;
    height: 100px;
    border: 10px solid transparent;
    border-radius: 15px 0 15px 0;
    -moz-border-top-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-right-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-bottom-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
    -moz-border-left-colors:#a0a #909 #808 #707 #606 #505 #404 #303;
  }

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung einiger Beispielverwendungscodes von Border-Eigenschaften in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!