Über den Gliederungsstil in CSS

Umriss (Umriss) ist eine Linie, die um ein Element herum gezeichnet wird und sich außerhalb des Randes des Rahmens befindet und das Element hervorheben kann. Das Umrissattribut legt den Umriss um das Element fest.

Deklarieren Sie immer das Attribut outline-style vor dem Attribut outline-color. Die Farbe des Umrisses eines Elements kann erst geändert werden, nachdem es seinen Umriss erhalten hat.

Mögliche Wertbeschreibungen:

keine Standard. Definieren Sie keine Gliederung.
dotted definiert einen gepunkteten Umriss.
dashed definiert einen gestrichelten Umriss.
solid definiert einen durchgezogenen Umriss.
double definiert einen doppelten Linienumriss. Die Breite der Doppellinie entspricht dem Wert von outline-width.
Groove definiert das 3D-Rillenprofil. Dieser Effekt hängt vom Wert der Umrissfarbe ab.
Der Grat definiert das 3D-Rillenprofil. Dieser Effekt hängt vom Wert der Umrissfarbe ab.
Einschub definiert das 3D-konkave Kantenprofil. Dieser Effekt hängt vom Wert der Umrissfarbe ab.
Umriss definiert das konvexe 3D-Kantenprofil. Dieser Effekt hängt vom Wert der Umrissfarbe ab.
inherit gibt an, dass die -Umrissstileinstellungen vom übergeordneten Element geerbt werden sollen.

Was genau bedeutet Kontursteuerung?

Wenn Sie sich auf das a-Tag konzentrieren, wird um den Bereich des a-Tags ein gepunktetes Kästchen angezeigt. Dieses Kästchen unterscheidet sich vom Rand dadurch, dass es keine Breite einnimmt . Wenn Sie den Fokus aufheben, verschwindet das gepunktete Kästchen auf natürliche Weise. Sie können es über mehrere Versionen von Aoyou, Firefox oder IE sehen. Allerdings unterstützen die Browser Safari, Opera und Goole diesen Effekt nicht, sodass er nicht sichtbar ist.

Im Grunde ist dies ein nutzloser Effekt. In den meisten Fällen hoffen wir, diesen Effekt nicht zu haben, daher setzen wir für das Tag „a“ leider ie6, es kann nicht implementiert werden 7- und Aoyou-Browser heben den fokussierten gepunkteten Rahmen nach dem Hinzufügen von „outline:none“ auf.

Wie kann ich dieses gepunktete Kästchen stornieren? Es gibt drei häufig verwendete Methoden:

1: JS-Steuerung zum a-Tag hinzufügen. Wenn der a-Tag fokussiert ist, wird der Fokus zu diesem Zeitpunkt aufgehoben Das Tag hat natürlich keinen gepunkteten Rahmen.

<a href="#" onfocus="this.blur();">测试</a>

Hier wird Blur() ausgelöst, wenn der Fokus gesetzt wird, um das Aufheben des Fokus zu erzwingen. Natürlich ist es erprobt und wahr.

2: Verschachteln Sie andere Tags im a-Tag, z. B. span oder var usw., und fügen Sie den Inhalt in das verschachtelte Tag ein. Zu diesem Zeitpunkt konzentriert sich das Klicken auf diesen Link auf das Unter-Tag von a und natürlich nicht auf das a-Tag, sodass dieses Problem vermieden werden kann.

3: Anstatt das Tag „a“ als Link zu verwenden, verwenden Sie andere Tags, verwenden Sie js, um einen Hover-Effekt zu erstellen, fügen Sie „cursor:pointer“ zu „css“ hinzu und setzen Sie den Mauszeiger, um das zu erstellen Hand kleiner. Geben Sie Benutzern die Illusion eines Links. Verwenden Sie js, um beim Klicken Seitensprünge usw. durchzuführen. Der größte Nachteil besteht darin, dass es viel weniger benutzerfreundlich ist als die ersten beiden.

Das obige ist der detaillierte Inhalt vonÜber den Gliederungsstil in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!