Maison > Article > interface Web > CSS réalise l'effet du modèle de signet
CSS réalise l'effet du modèle de signet
- php中世界最好的语言original
- 2018-03-22 14:23:095362parcourir
Cette fois, je vais vous présenter l'effet de l'implémentation de modèles de signets avec CSS. Quelles sont les précautions pour implémenter des modèles de signets avec CSS. Voici des cas pratiques, jetons un coup d'œil.
L'exemple de code est le suivant :
<!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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. plus d'informations intéressantes, veuillez prêter attention au site Web chinois php Autres articles connexes !
Lecture recommandée :
Explication graphique et textuelle détaillée de float en CSS
Quatre méthodes de masquage en html+css
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!