搜尋

首頁 >web前端 >css教學 >實現優惠券邊緣打孔的CSS代碼

實現優惠券邊緣打孔的CSS代碼

小云云
小云云原創
2018-02-09 10:34:422739瀏覽

專案中用到了這個邊緣打孔的效果，嘗試下來使用純css寫的這個樣式，本文主要給大家分享使用純css寫的一個邊緣打孔效果，需要的朋友參考下，希望能幫助到大家。

效果大致如圖

逐步實現想法：

1，先畫兩個圓角的框，A和B（A、B分別需要加投影效果，圖上沒有做）

2，在B的左右兩個縫隙的地方分別畫一排圓（其實是正方形用了50％的圓角），圓形填充色和背景色相同（此處背景色是白色，所以圓的填充是白色）

3，給圓孔加上內陰影，達到真實的打孔效果，這裡用到的是這樣的css：

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

4，此時B右邊的一排圓孔由於加上了內陰影的關係，顯得多了右半邊，這裡需要再對多餘部分進行處理

再使用一塊和背景色（此處為白色）一致的區塊擋住右邊多餘的一半孔即可（即區域C，為了看清這裡用了不一樣的顏色，調成和背景色一致後就是開頭的效果圖）

##注意：A和B的寬度可以是自適應的（例如分別是外層的百分之多少），由於打孔的個數和位置的關係，A和B的高度必須是寫死的

具體實現的程式碼如下：

<!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>
具體程式碼實現的真實效果：

 

#相關推薦：

##生成優惠券碼方案

以上是實現優惠券邊緣打孔的CSS代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css3實現滑鼠跟隨導航效果下一篇：css3實現滑鼠跟隨導航效果

相關文章

看更多