css實現兩邊有缺口的卡券效果

阿新 • • 發佈：2019-01-22

自己專案用到優惠券的樣式，特拿來分享。主要用到了css的position: absolute屬性。
效果如下圖：
效果圖
廢話不多說，直接上程式碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>驗證券樣式</title>
    <style>
            body{
                background-color: #E2DFDF;
            }
        .div 
{
            position: relative;
            width: 200px;
            height: 100px;

            margin:100px auto;
            background-color: #fff;
        }
        .yuan1{
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color 
: #E2DFDF;
            left: -10px;
            top:40px;
        }
        .yuan2{
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color: #E2DFDF;
            right: -10px;
            top:40px;
        }
    </style 
>
</head>
<body>
    <div class="div">
        <div class="yuan1"></div>
        <div class="yuan2"></div>
    </div>
</body>
</html>

css實現兩邊有缺口的卡券效果

自己專案用到優惠券的樣式，特拿來分享。主要用到了css的position: absolute屬性。效果如下圖：廢話不多說，直接上程式碼 <!DOCTYPE html> &l

DIV+CSS實現兩邊固定寬度,中間自適應寬度

round gin itl lan enter color css 寬度自適應 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g

16 css實現模糊背景的三種效果

背景 relative .net 麻煩 net lex dex 而在 color --------------------- 本文來自 csu_zipple 的CSDN 博客，全文地址請點擊：https://blog.csdn.net/csu_passer/article

CSS實現：標題兩側畫線效果

tail ext font ack pla round left pan mage 如圖： html代碼： 1 <div class="detail-news"> 2 <h5 class="detail-news-title">

css實現橫向帶箭頭步驟流程效果

　通過純css實現圓角的步驟流程效果，擴充套件性強，可以隨意增加減少數量，相容性ie6+。具體程式碼： 1 <style type="text/css"> 2 ul{margin:0px; padding:0px; list-style:none;} 3 .wrap{

DIV+CSS實現仿京東商城導航條效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xml

css實現導航欄下劃線跟隨效果

話不多說先附上程式碼 <style> ul li { float: left; display: block; list-style: none; marg

jq + css 實現簡單的圖片輪播效果

jq + css 實現簡單的圖片輪播效果開發過程中需要用到圖片輪播的外掛，在網上找了幾個外掛之後還是決定自己碼一個，比較簡潔的功能，以後說不定還會有用。 ps：功能比較簡單，整個框並不能根據圖片的大小自動調節，這裡所用的圖片是1170*500的，如果需要改成其他大小的圖片，自行

純CSS實現專案展示遮罩詳情效果

本例項主要用於專案展示時滑鼠hover後顯示一個遮罩顯示專案詳情的效果，遮罩採用CSS的絕對定位以及CSS3盒子模型。本例項應用廣泛，很多品牌官方網站均有采用。 hover： 1 <!DOCTYPE html> 2 <html> 3 4 <head

css實現滑鼠懸浮後的提示效果

一、概述很多時候網站中需要在滑鼠劃過小圖示時，懸浮出提示性的文字。比如下圖：滑鼠懸浮後的效果這種效果可以使用css中的偽類hover來實現。但有時候搞不清兩個元素的巢狀關係。使用了hover卻沒有效果。本人剛開始使用的時候也踩了這個坑。

CSS實現的滑鼠經過按鈕的效果

{background-color:#CCCCCC;border-left:1px solid #F5F5F5;border-top:1px solid #F5F5F5;border-right:1px solid #333333;border-bottom:1px solid #333333;width:8

DIV+CSS實現區域滑鼠事件的動態效果

現在WEB2.0時代來了，你可以在很多網站上看到一種滑鼠移動上去表格會有狀態的效果，今天偶就給大家講一下具體的做法，可能我這個方法不太好，還請大家多多指點。其實方法就是在DIV裡面加入了 OnMouseOver(滑鼠移動到上面) OnMouseOut(滑鼠移開) OnMo

用HTML和CSS實現WWDC 2015上的動畫效果

每年，蘋果都會召開一次重大的會議。WWDC(蘋果開發者大會)是iOS開發者和OSX開發者學習蘋果先進高科技和移動裝置與桌面軟體新概念的好機會。每一年的這個時候，他們都會製造出很多新創意，今年，我被一個用簡單圓圈和形狀製作出來的圖示所驚豔，於是我決定用HTML和CSS來實現它。 WWDC

簡單css實現高斯模糊（毛玻璃效果）

img標籤新增class 設定filter:blur (0-npx)模糊半徑 filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

CSS實現相容性的漸變背景(gradient)效果

一、IE系列（1）語法：filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)progid:DXImageTransform.Microsoft.gr

用css偽類實現文字左右兩邊有橫線的效果

<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta na

用html+css+js實現選項卡切換效果

window.onload = function () { chang(); var myTab = document.getElementById("gameDevelopment"); //整個div var myUl = myTab.getElementsByTagName("ul")[0];//一個

純CSS實現選項卡效果

利用 :focus-within 可以在父節點獲取元素獲得焦點的特性，實現的TAB導航切換 .xxk { width: 300px;margin: 50px auto;padding: 10px;border: 1px solid #ddd;} .nav-box {f

css實現中間文字，兩邊橫線效果

vertical-align 屬性設定元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。 <div class="header"> <span class="line"></span>

css實現選項卡

pan splay ora eight name checked wid overflow block <style> *{ margin: 0; padding: 0;

css實現兩邊有缺口的卡券效果

相關推薦