CSS erkennt den Effekt des Lesezeichenmusters-CSS-Tutorial-php.cn

CSS erkennt den Effekt des Lesezeichenmusters

php中世界最好的语言

Freigeben： 2018-03-22 14:23:09

Original

5482 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Auswirkungen der Implementierung von Lesezeichenmustern mit CSS vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung von Lesezeichenmustern mit CSS?

Der Beispielcode lautet wie folgt:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>border制作书签（图形）</title>
        <style>
            .p2:before { /*做一个书签效果*/
                position: absolute; /*必须*/
                top: 50px;
                left: 20px;
                z-index: 1;
                height: 0;
                padding-right: 10px;
                font-weight: bold;
                line-height: 0;
                color: #000;
                border: 15px solid #ee7600;
                border-right-color: transparent; /*右边框透明，变成空缺的角*/
                content: '书签';
                box-shadow: 0 5px 5px -5px #000;
            }
            .p2:after { /*书签的夹角*/
                content: '';
                position: absolute;
                top: 80px;
                left: 20px;
                border: 4px solid #89540c;
                border-left-color: transparent;
                border-bottom-color: transparent;
            }
        </style>
    </head>
    <body>
        <p class="p1"></p>
        <p class="p2"></p>
    </body>
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Weitere verwandte Artikel!

Empfohlene Lektüre:

Detaillierte Grafik- und Texterklärung von Float in CSS

Vier Versteckmethoden in HTML+CSS

Das obige ist der detaillierte Inhalt vonCSS erkennt den Effekt des Lesezeichenmusters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!