suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS erkennt den Effekt des Lesezeichenmusters

CSS erkennt den Effekt des Lesezeichenmusters

php中世界最好的语言
php中世界最好的语言Original
2018-03-22 14:23:095428Durchsuche

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>

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!

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：Probleme mit der CSS3-BrowserkompatibilitätNächster Artikel：Probleme mit der CSS3-Browserkompatibilität

In Verbindung stehende Artikel

Mehr sehen