Maison > Article > interface Web > Code CSS pour percer des trous dans les bords des coupons

Code CSS pour percer des trous dans les bords des coupons

小云云original: 2018-02-09 10:34:422687parcourir

Cet effet de punching de bord a été utilisé dans le projet. J'ai essayé ce style écrit en CSS pur. Cet article partage principalement avec vous un effet de punching de bord écrit en CSS pur. Les amis qui en ont besoin pourront s'y référer. aidez tout le monde.

L'effet est à peu près comme indiqué ci-dessous

Idées de mise en œuvre étape par étape :

1. Dessinez d'abord deux cases arrondies. coins, A et B (A et B doivent respectivement ajouter des effets de projection, ce qui n'est pas fait sur la photo)

2 Dessinez une rangée de cercles à gauche et. espaces droits de B (en fait, le carré utilise 50 % de coins arrondis), la couleur de remplissage du cercle est la même que la couleur de fond (la couleur de fond ici est blanche, donc le remplissage du cercle est blanc)

3, donnez Ajoutez une ombre intérieure au trou rond pour obtenir un véritable effet de poinçonnage. Le CSS utilisé ici est :

box-shadow:0 1px 1px rgba(0,0,0,0.2) inset;

4. cette fois, la rangée à droite de B. En raison de l'ombre intérieure, le trou rond semble avoir une moitié droite supplémentaire. Ici, nous devons traiter la partie excédentaire

Ensuite, utilisez un bloc de la même couleur que. le fond (blanc ici) pour bloquer l'excédent sur le côté droit. La moitié des trous suffisent (c'est à dire la zone C. Afin de voir clairement, une couleur différente est utilisée ici. Après l'avoir ajustée à la même couleur que le fond, ce sera le rendu initial)

Remarque : La largeur de A et B peut être adaptative (par exemple, le pourcentage de la couche externe respectivement en raison du nombre). et la position des trous, la hauteur de A et B doit être codée en dur

Le code spécifique implémenté est le suivant :

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />  
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
<title>Stamp Demo</title>  
<style>  
html,body,p,p,i,span,ul,li{  
    margin:0;  
    padding:0;  
}  
body{  
    background-color:#eee;  
}  
ul{  
    list-style:none;  
}  
.stamp_list{  
    margin:20px auto;  
    width:90%;  
}  
.stamp{  
    height: 125px;  
    margin-bottom: 20px;  
    position: relative;  
    box-sizing:border-box;  
    border-radius:5px;  
}  
.stamp_inner{  
    height: 125px;  
    display:inline-block;  
    vertical-align:top;  
    box-sizing:border-box;  
    position:relative;  
    border-radius:5px;  
    box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);  
}  
.stamp_left{  
    width: 70%;  
    background: #ffffff;  
}  
.stamp_left .box{  
    position:absolute;  
    right:0;  
    bottom:0;  
    width:78px;  
    height:81px;  
}  
.stamp_right{  
    width:30%;  
    background: #F8E71C;  
}  
.circle_list{  
    position:absolute;  
    top:5px;  
}  
.circle_list1{  
    left:-5px;  
}  
.circle_list2{  
    right:-5px;  
}  
.circle_list2:after{  
    content: '';  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 6px;  
    right: -5px;  
    z-index: 1;  
    background-color: #eee;  
}  
.circle_list>li{  
    background-color:#eee;  
    width:10px;  
    height:10px;  
    border-radius:50%;  
    margin-bottom:5px;  
    box-shadow:0 1px 1px rgba(0,0,0,0.2) inset;  
}  
</style>  
</head>  
<body>  
<ul class="stamp_list">  
    <li class="stamp">  
        <p class="stamp_inner stamp_left">  
        </p  
        ><p class="stamp_inner stamp_right">  
            <span>123</span>  
            <ul class="circle_list circle_list1">  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
            </ul>  
            <ul class="circle_list circle_list2">  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
            </ul>  
        </p>  
    </li>  
    <li class="stamp">  
        <p class="stamp_inner stamp_left">  
        </p  
        ><p class="stamp_inner stamp_right">  
            <span>123</span>  
            <ul class="circle_list circle_list1">  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
            </ul>  
            <ul class="circle_list circle_list2">  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
            </ul>  
        </p>  
    </li>  
    <li class="stamp">  
        <p class="stamp_inner stamp_left">  
        </p  
        ><p class="stamp_inner stamp_right">  
            <span>123</span>  
            <ul class="circle_list circle_list1">  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
            </ul>  
            <ul class="circle_list circle_list2">  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
                <li></li>  
            </ul>  
        </p>  
    </li>  
</ul>  
</body>  
</html>

L'effet réel obtenu par le code spécifique :

Recommandations associées :

Générer un plan de code promo

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：css3 implémente l'effet de navigation suivant la sourisArticle suivant：css3 implémente l'effet de navigation suivant la souris

Articles Liés

Voir plus