Einführung in den Rahmenstil von CSS-Boxen

高洛峰

Freigeben： 2017-03-04 16:56:50

Original

2424 Leute haben es durchsucht

Randstile umfassen Vollrand- und Einzelrandstile, und für jede Seite können unterschiedliche Stile festgelegt werden

Der folgende Code P1 ist der Vollrandstil und P2 legt verschiedene Stile für einen einzelnen Rand fest:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css边框样式</title>
    <style>
        #p1{
            background: yellowgreen;
            border:4px dotted rebeccapurple;
            border-radius: 20px;
            width:200px;
            text-align:center;
            padding:5px;
            color:#fff;
            font-weight:bold;
        }
        #p2{
            background: rebeccapurple;
            border:4px dashed skyblue;
            border-radius: 5px;
            width:200px;
            text-align:center;
            padding:5px;
            color:#fff;
            font-weight:bold;
            border-bottom-color: palegreen;
            border-top-style: dotted;
        }
    </style>
</head>
<body>
<p id="p1">这是一段测试文字</p>
<p id="p2">这是一段测试文字</p>
</body>
</html>

Nach dem Login kopieren

Weitere Artikel zum CSS-Box-Randstil finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten：

css

Quelle：php.cn

Vorheriger Artikel：So erstellen Sie einen Stern mit CSS3 Nächster Artikel：CSS-Textstil und Methode zur Steuerung der Groß- und Kleinschreibung von Text

Erklärung dieser Website

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

Neueste Artikel des Autors