Eine detaillierte Einführung in das Border-Attribut von CSS
border's Attribut
1. border-width: unterstützt keinen Prozentsatz, unterstützt Schlüsselwörter, dünn (1 Pixel), mittel (Standardwert, 3 Pixel, The Der Grund, warum der Standardwert 3 Pixel beträgt, liegt darin, dass border-style nur gültig ist, wenn der Rahmen 3 Pixel und höher ist. Stil: hat unterschiedliche Werte. Im Folgenden werden die Anwendungen unterschiedlicher Werte analysiert
a.solid: kann Dreiecke und Trapeze realisieren
b.dashed: gestrichelte Linie, durchsuchen in Chrome/Firefox Im Browser beträgt das Verhältnis von gepunkteten Linien und durchgezogenen Linien 3:1 (dünn), imIE-Browser
beträgt das Verhältnis 2:1 (dicht)<!DOCTYPE html><html><head>
<title>用solid实现三角和梯形</title>
<meta charset="utf-8">
<style type="text/css">
.triangle{
width: 0px;
height: 0px;
border-style:solid;
border-width: 50px;
border-color: red transparent transparent transparent;
}
.trapezia{
width: 40px;
height: 40px;
border-style: solid;
border-width: 50px;
border-color:transparent transparent green transparent ;
margin-top: 10px;
}
</style></head><body><p class="triangle"></p>我是三角形<p class="trapezia"></p>我是梯形</body></html> c.dotted: Gepunktete Linie ist im Chrome-/Firefox-Browser ein quadratischer Punkt, im IE-Browser ist Es ist ein runder Punkt (Sie können runde Punkte verwenden, um einen abgerundeten Eckeneffekt zu erzielen)
d.double: Doppellinie, Berechnungsregel. Die Breite der Doppellinien ist immer gleich und das mittlere Intervall beträgt +- 1. Zum Beispiel 3px=1 (innen) + 1 (mittleres Intervall) + 1 (außen), wodurch eine Grafik mit drei Balken realisiert werden kann.
e.inset (Einschub), Outset (außen konvex), Ridge (Groove): veralteter Stil, schlechte Kompatibilität, keine Verwendungsszenarien
3.border-color: in Wenn Sie die Farbe angeben, Farbe als Rahmenfarbe verwenden Mit dieser Funktion können Sie den CSS-Stilcode vereinfachen, wenn der Link seine Farbe ändert. Zum Beispiel:
4. Verwenden Sie Ränder, um das Hintergrundbild zu positionieren, da das Hintergrundbild den Rand beim Positionieren nicht berechnet<!DOCTYPE html><html><head>
<title>鼠标移动时边框颜色的改变</title>
<meta charset="utf-8">
<style type="text/css">
.a{
width: 30px;
height: 30px;
padding: 20px;
margin:30px;
color: red;
border:1px solid;
}
.a:hover{
color: blue;/* border:1px solid;*/ }
</style></head><body><p class="a">哈哈</p></body></html>
(4 und 5 sind ähnlich, beide verwenden Rahmen, um den Abstand von einer bestimmten Seite festzulegen)
Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das Border-Attribut von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Vergleich von Browsern für reaktionsschnelles Design
Apr 02, 2025 pm 06:25 PM
Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben
Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor
Apr 02, 2025 am 04:27 AM
Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?
Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass
Apr 03, 2025 am 10:30 AM
Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.
