Heim >Web-Frontend >CSS-Tutorial >CSS erkennt den Effekt des Lesezeichenmusters
CSS erkennt den Effekt des Lesezeichenmusters
- php中世界最好的语言Original
- 2018-03-22 14:23:095494Durchsuche
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!