• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當前位置: 首頁 - 科技 - 知識百科 - 正文

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

    來源:懂視網 責編:小采 時間:2020-11-27 18:49:20
    文檔

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

    實現優惠券邊沿打孔的CSS代碼:項目中用到了這個邊沿打孔的效果,嘗試下來使用純css寫的這個樣式,本文主要給大家分享使用純css寫的一個邊沿打孔效果,需要的朋友參考下,希望能幫助到大家。效果大致如圖分步實現思路:1,先畫兩個帶圓角的框,A和B(A、B分別需要加投影效果,圖上沒有做)
    推薦度:
    導讀實現優惠券邊沿打孔的CSS代碼:項目中用到了這個邊沿打孔的效果,嘗試下來使用純css寫的這個樣式,本文主要給大家分享使用純css寫的一個邊沿打孔效果,需要的朋友參考下,希望能幫助到大家。效果大致如圖分步實現思路:1,先畫兩個帶圓角的框,A和B(A、B分別需要加投影效果,圖上沒有做)
    項目中用到了這個邊沿打孔的效果,嘗試下來使用純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>

    具體代碼實現的真實效果:

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

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

    實現優惠券邊沿打孔的CSS代碼:項目中用到了這個邊沿打孔的效果,嘗試下來使用純css寫的這個樣式,本文主要給大家分享使用純css寫的一個邊沿打孔效果,需要的朋友參考下,希望能幫助到大家。效果大致如圖分步實現思路:1,先畫兩個帶圓角的框,A和B(A、B分別需要加投影效果,圖上沒有做)
    推薦度:
    標簽: 實現 代碼 優惠券
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 久久精品中文闷骚内射| 日产欧美国产日韩精品| 精品亚洲成AV人在线观看| 精品久久一区二区| 无码精品人妻一区二区三区中| 国产亚洲精品高清在线| 国产精品久久久久影院嫩草| 一本色道久久综合亚洲精品| 国产精品最新国产精品第十页 | 91精品国产高清久久久久久io | 久久久久无码精品国产不卡| 欧美日韩国产精品| 国产亚洲精品AA片在线观看不加载| 国产精品久久网| 国产亚洲色婷婷久久99精品| 亚洲色精品88色婷婷七月丁香| 久热精品人妻视频| 久久精品国产99久久久香蕉| 国产精品免费看久久久香蕉| 92精品国产自产在线观看| 国产精品久久久久久搜索| 国产麻豆一精品一AV一免费| 久久久久久久久无码精品亚洲日韩| 亚洲欧美日韩另类精品一区二区三区 | 18国产精品白浆在线观看免费| 十八18禁国产精品www| 中文字幕久精品免费视频| 亚洲av午夜成人片精品电影| 亚洲精品黄色视频在线观看免费资源 | 亚洲日韩精品欧美一区二区| 国产精品亚洲午夜一区二区三区| 97久久精品国产精品青草| A级精品国产片在线观看| 国内精品人妻无码久久久影院| 精品久久久噜噜噜久久久| 人妻少妇精品中文字幕av蜜桃| 亚洲国产美女精品久久久久∴| 亚洲精品乱码久久久久久按摩 | 精品91自产拍在线观看| 精品一区二区三区高清免费观看| 国产亚洲精品自在线观看|