Heim > Artikel > Web-Frontend > CSS-Einführungs-Tutorial: Bildrandrand

CSS-Einführungs-Tutorial: Bildrandrand

高洛峰Original: 2017-02-08 10:07:041569Durchsuche

1. Bildrand

Im Abschnitt „CSS-Rand“ erklären wir das Randattribut im Detail. In CSS verwenden wir auch das Attribut „border“, um den Rand des Bildes zu definieren.

Syntax:

border-width: Pixelwert;

border-style: Attributwert;

border -color: Farbwert;

Hinweis: Oder verwenden Sie die prägnante Randschreibmethode, z. B. „border:1px solid grey;“.

Hinweis:

Wenn Sie das Randattribut vergessen, gehen Sie bitte noch einmal zurück und überprüfen Sie es selbst.

Beispiel 1:

<!DOCTYPE html>
<head>
    <title>图片边框border</title>
    <style type="text/css">
        img
        {
            width:60px;
            height:60px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>

Der Vorschaueffekt im Browser ist wie folgt:

CSS-Einführungs-Tutorial: Bildrandrand

Beispiel 2:

<!DOCTYPE html>
<head>
    <title>图片边框border</title>
    <style type="text/css">
        img{width:60px;height:60px;}
        img:hover{border:1px solid gray;}
    </style>
</head>
<body>
    <img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</body>
</html>

Der Vorschaueffekt im Browser ist wie folgt:

CSS-Einführungs-Tutorial: Bildrandrand

Analyse: In diesem Beispiel verwenden wir die „:hover-Pseudoklasse“, um dieses Grau zu definieren erscheint, wenn die Maus über den Bildrahmen fährt.

Weitere einführende CSS-Tutorials: Artikel zum Thema Bildrand finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine vorläufige Untersuchung der CSS (Attribute) von HTMLNächster Artikel：Eine vorläufige Untersuchung der CSS (Attribute) von HTML

In Verbindung stehende Artikel

Mehr sehen