1
Ich brauche wie Bild unten Grenze unten mit zwei verschiedenen Farben erstellenWie man Rand unten mit 2 verschiedenen Farben erstellt?
wie die CSS schaffen?
thx u
A
Antwort
4
Sie können CSS-Pseudo-Klassen verwenden, das heißt :after oder :before.
h3 {
margin: 0;
padding-bottom: 7px;
position: relative;
border-bottom: 2px solid #ccc;
}
h3:before {
position: absolute;
background: brown;
height: 2px;
content: '';
width: 50px;
bottom: -2px;
left: 0;
}<h3>Last Recent Post</h3>Und Sie können auch CSS Gradient verwenden:
h3 {
margin: 0;
padding-bottom: 7px;
position: relative;
}
h3:before {
position: absolute;
background: linear-gradient(to right, brown 50px, #ccc 50px);
height: 2px;
content: '';
bottom: 0;
right: 0;
left: 0;
}<h3>Last Recent Post</h3>
0
Verwendung box-shadow mit Null Unschärfe
Syntax: schachtel shadow: x-Offset-Y-Offsetunschärferadius Farbe
Beispiel:schachtel shadow 0 0 0 1EM rot, 0 0 0 2em Orange.
Dies emuliert einen Rand von 1em roten Rand und dann einen 1em orange Rand.
Hinweis, die orange Farbe mit einem Radius von 2em hat
Verwenden Sie einen kleineren Pseudo eine 'linear-gradient' als Grenze oder Hintergrundbild (oder) platzieren (weil die Hälfte davon wird durch rote Farbe abgedeckt werden) Element an der Spitze. Dieser Thread sollte helfen - http://stackoverflow.com/questions/32781360/css-border-colour-into-4-colours/32781447#32781447 (obwohl es mehr Farben hat) – Harry