好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

纯CSS实现各种图形效果分享

CSS可以实现任意的图形,特别是CSS3的圆角、旋转、倾斜等效果出现之后,CSS2要想出现斜线,可利用border的特性,利用相邻的边框不同颜色出现斜线的特点,自己体会吧^_^

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>迷津渡口-纯CSS实现各种图形效果分享</title>
<style>
#header { width: 800px; margin: 40px auto 20px; }
h1 { position: relative; width: 50%; padding: 10px 20px; border-radius: 0 0 2px 2px; margin: 0 auto; font-size: 20px; font-weight: normal; color: #FFF; background-color: #206020; text-align: center; text-transform: uppercase; }
h1:before,
h1:after { content: ''; position: absolute; display: block; top: -6px; border: 18px solid #103010; }
h1:before { left: -35px; border-right-width: 18px; border-left-color: transparent; }
h1:after { right: -35px; border-left-width: 18px; border-right-color: transparent; }
h1 span:before,
h1 span:after { content: ''; position: absolute; display: block; border-style: solid; border-color: #083808 transparent transparent transparent; top: -6px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
h1 span:before { left: 0; border-width: 6px 0 0 6px; }
h1 span:after { right: 0; border-width: 6px 6px 0 0; }
#container { width: 800px; margin: 30px auto; background-color: #eee; }
div { margin: 20px auto; text-align: center; }

/*实心前景和背景*/
.solid { color: #FFF; background-color: green; }

/*空心前景和背景*/
.hollow { color: green; background-color: #FFF; border: 4px solid green; }

/*长方形*/
.rectangle { width: 200px; height: 100px; line-height: 100px; }

/*椭圆长方形*/
.rectangleellipse { position: relative; width: 200px; height: 100px; line-height: 100px; border-radius: 10%/50%; }

/*正方形*/
.square { width: 200px; height: 200px; line-height: 200px; }

/*圆形*/
.circle { width: 200px; height: 200px; line-height: 200px; border-radius: 50%; }

/*实心半圆*/
.halfcirclesolid { width: 200px; height: 100px; line-height: 100px; border-radius: 100px 100px 0 0; color: #FFF; background-color: green; }

/*空心半圆形*/
.halfcirclehollow { width: 200px; height: 100px; line-height: 100px; border: 2px solid green; border-radius: 100px 100px 0 0; color: green; }

/*斜半圆形*/
.italichalfcirclehollow { width: 200px; height: 200px; line-height: 200px; border-width: 2px; border-style: solid; border-color: green transparent transparent green; border-radius: 100px; color: green; }

/*圆锥*/
.cone { width: 0; height: 0; padding: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 100px solid green; border-radius: 50%; }

/*弯月亮*/
.moon { width: 200px; height: 200px; padding: 0; border-radius: 50%; box-shadow: 30px 30px 0 0 green; margin-bottom: 30px; }

/*椭圆*/
.ellipse { width: 200px; height: 100px; line-height: 100px; border-radius: 50%/50%; }

/*三角形*/
.triangle { width: 0; height: 0; padding: 0; font-size: 0; line-height: 0; }

/*四色正方形*/
.colorful { border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }

/*实心上直角三角形*/
.rgtsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; }

/*实心右直角三角形*/
.rgtsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; }

/*实心下直角三角形*/
.rgtsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 100px solid green; }

/*实心左直角三角形*/
.rgtsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 100px solid green; }

/*实心左上直角三角形*/
.rgtsolidlefttop { border-top: 100px solid green; border-right: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 100px solid green; }

/*实心右上直角三角形*/
.rgtsolidrighttop { border-top: 100px solid green; border-right: 100px solid green; border-bottom: 100px solid transparent; border-left: 100px solid transparent; }

/*实心右下直角三角形*/
.rgtsolidrightbottom { border-top: 100px solid transparent; border-right: 100px solid green; border-bottom: 100px solid green; border-left: 100px solid transparent; }

/*实心左下直角三角形*/
.rgtsolidleftbottom { border-top: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid green; border-left: 100px solid green; }

/*上等边三角形*/
.eqsolidtop { border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 173px solid green; }

/*右等边三角形*/
.eqsolidright { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-left: 173px solid green; }

/*下等边三角形*/
.eqsolidbottom { border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 173px solid green; }

/*左等边三角形*/
.eqsolidleft { border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 173px solid green; }

/*平行四边形*/
.parallelogram { position: relative; width: 240px; height: 120px; padding: 0; }
.parallelogram::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; }
.parallelogram::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: green transparent transparent green; }

/*平行四边形组成的进度条*/
.progressbar { width: 100%; height: 18px; border: 2px solid green; text-align: left; overflow: hidden; }
.progressbar .parallelogram { display: inline-block; width: 40px; height: 20px; padding: 0; margin: 0; }
.progressbar .parallelogram::before,
.progressbar .parallelogram::after { border-width: 10px; }
.progressbar .parallelogram { right: 100%; -webkit-transition: right 4s linear; -moz-transition: right 4s linear; -ms-transition: right 4s linear; -o-transition: right 4s linear; transition: right 4s linear; }
.progressbar:hover .parallelogram { right: 0; }

/*梯形*/
.trapezoid { width: 120px; height: 0; padding: 0; border-top: 120px solid green; border-left: 60px solid transparent; border-right: 60px solid transparent; }

/*五边形*/
.pentagon { position: relative; width: 100px; border-width: 95px 31px 0; border-style: solid; border-color: green transparent; margin-top: 100px; }
.pentagon::before { content: ''; position: absolute; top: -152px; left: -31px; width: 0; height: 0; border-width: 0 81px 59px; border-style: solid; border-color: transparent transparent green; }

/*六边形*/
.hexagon { position: relative; width: 208px; height: 120px; line-height: 120px; margin-top: 120px; color: #FFF; background-color: green; }
.hexagon::before { content: ''; position: absolute; top: -60px; left: 0; width: 0; height: 0; border-width: 0 104px 60px; border-style: solid; border-color: transparent transparent green; }
.hexagon::after { content: ''; position: absolute; bottom: -60px; left: 0; width: 0; height: 0; border-width: 60px 104px 0; border-style: solid; border-color: green transparent transparent; }

/*八边形*/
.octagon { position: relative; width: 241px; height: 100px; line-height: 100px; margin: 200px auto; color: #FFF; background-color: green; }
.octagon::before { content: ''; position: absolute; top: -70px; left: 0; width: 100px; height: 0; border-width: 0 71px 71px; border-style: solid; border-color: transparent transparent green; }
.octagon::after { content: ''; position: absolute; bottom: -70px; left: 0; width: 100px; height: 0; border-width: 71px 71px 0; border-style: solid; border-color: green transparent transparent; }

/*耳朵*/
.angletwo { position: relative; display: inline-block; width: 240px; height: 120px; }
.angletwo::before { content: ''; position: absolute; left: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent transparent green green; }
.angletwo::after { content: ''; position: absolute; right: 0; top: 0; display: block; width: 0; height: 0; border-width: 60px; border-style: solid; border-color: transparent green green transparent; }
.anglefour { position: relative; width: 360px; height: 360px; padding: 0; }

/*飞镖*/
.fourtop { position: absolute; left: 120px; top: 0; display: block; width: 0; height: 0; padding: 0; border-right: 60px solid transparent; border-bottom: 120px solid green; border-left: 60px solid transparent; }
.fourright { position: absolute; right: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; border-left: 120px solid green; }
.fourbottom { position: absolute; left: 120px; top: 240px; display: block; width: 0; height: 0; padding: 0; border-top: 120px solid green; border-right: 60px solid transparent; border-left: 60px solid transparent; }
.fourleft { position: absolute; left: 0; top: 120px; display: block; width: 0; height: 0; padding: 0; border-top: 60px solid transparent; border-right: 120px solid green; border-bottom: 60px solid transparent; }
.fourmiddle { position: absolute; left: 120px; top: 120px; display: block; width: 120px; height: 120px; background-color: green; }

/*钻石*/
.diamond { position: relative; width: 120px; height: 0; border-style: solid; border-color: transparent transparent green transparent; border-width: 0 60px 60px 60px; margin-bottom: 300px; color: #FFF; }
.diamond::after { content: ''; position: absolute; top: 60px; left: -60px; width: 0; height: 0; border-width: 200px 120px 0; border-style: solid; border-color: green transparent transparent; }

/*心形*/
.heart { position: relative; width: 200px; height: 180px; padding: 0; }
.heart::before { content: ''; position: absolute; width: 100px; height: 160px; left: 100px; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -o-transform-origin: 0 100%; tansform-origin: 0 100%; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.heart::after { content: ''; position: absolute; width: 100px; height: 160px; left: 0; top: 0; border-radius: 100px 100px 0 0; background-color: green; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*向右下弯尾箭头*/
.curvearrowrightbottom { position: relative; width: 0; height: 0; border-top: 100px solid transparent; border-right: 100px solid green; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
.curvearrowrightbottom::after { content: ""; position: absolute; top: -120px; left: -90px; width: 120px; height: 120px; border-top: 30px solid green; border-radius: 120px 0 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*向左上弯尾箭头*/
.curvearrowlefttop { position: relative; width: 0; height: 0; border-bottom: 100px solid transparent; border-left: 100px solid green; -webkit-transform: rotate(-10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); }
.curvearrowlefttop::after { content: ""; position: absolute; top: -30px; right: -90px; width: 120px; height: 120px; border-bottom: 30px solid green; border-radius: 0 0 120px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*蝴蝶结*/
.bow { position: relative; width: 240px; height: 120px; }
.bow::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid green; border-radius: 60px 60px 0 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.bow::after { content: ''; position: absolute; top: 0; left: 120px; width: 60px; height: 60px; border: 20px solid green; border-radius: 0 60px 60px 60px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

/*气球*/
.balloon { position: relative; width: 60px; height: 120px; }
.balloon::before { content: ''; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-radius: 60px 60px 60px 0; background-color: green; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
.balloon::after { content: ''; position: absolute; top: 70px; left: 30px; width: 1px; height: 60px; background-color: green; }

/*鸡蛋*/
.egg { width: 160px; height: 260px; padding: 0; background-color: green; border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; }

/*吃货*/
.foodie { width: 0; height: 0; padding: 0; border-width: 60px; border-style: solid; border-color: green transparent green green; border-radius: 60px; }

/*太极*/
.taiji { position: relative; width: 192px; height: 96px; padding: 0; border-color: green; border-style: solid; border-width: 4px 4px 100px 4px; border-radius: 100%; background-color: #fff; }
.taiji::before,
.taiji::after { content: ''; position: absolute; width: 24px; height: 24px; top: 50%; border-radius: 100%; }
.taiji::before { left: 0; border: 36px solid green; background-color: #fff; }
.taiji::after { left: 50%; border: 36px solid #fff; background-color: green; }

/*五角星*/
.starfive { position: relative; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; margin: 200px auto 100px; -moz-transfrom: rotate(36deg); -webkit-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); }
.starfive::before { position: absolute; left: -210px; top: 8px; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(-72deg); -webkit-transform: rotate(-72deg); -ms-transform: rotate(-72deg); -o-transform: rotate(-72deg); transform: rotate(-72deg); }
.starfive::after { position: absolute; left: -196px; top: 0; display: block; content: ''; width: 0; height: 0; border-left: 200px solid transparent; border-right: 200px solid transparent; border-bottom: 145px solid green; -moz-transfrom: rotate(72deg); -webkit-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); }

/*六角星*/
.starsix { position: relative; width: 0; height: 0; margin: 100px auto; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 200px solid green; }
.starsix::after { content: ''; position: absolute; top: 60px; left: -100px; width: 0; height: 0; border-top: 200px solid green; border-left: 100px solid transparent; border-right: 100px solid transparent; }

/*八角星*/
.stareight { position: relative; width: 200px; height: 200px; line-height: 200px; margin: 50px auto; color: #FFF; background-color: green; }
.stareight::before { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background-color: green; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/*十二角星*/
.startwelve { position: relative; width: 200px; height: 200px; margin: 50px auto; background-color: green; }
.startwelve::before,
.startwelve::after { content: ''; position: absolute; top: 0; left: 0; width: 200px; height: 200px; top: 0; left: 0; background-color: green; }
.startwelve::before { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
.startwelve::after { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); -moz-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg); }

/*对话气泡框*/
.talkbubble { position: relative; width: 160px; height: 80px; padding: 20px; border-radius: 10px; color: #FFF; background-color: green; text-align: left; }
.talkbubble::before { content: ''; position: absolute; right: 100%; top: 40px; width: 0; height: 0; border-top: 15px solid transparent; border-right: 30px solid green; border-bottom: 15px solid transparent; }
    </style>
</head>

<body>
    <header id="header"><h1><span>迷津渡口-纯CSS图形分享</span></h1></header>
    <div id="container">
        <!-- 实心长方形 -->
        <div class="rectangle solid">实心长方形</div>
        <!-- 长方形 -->
        <div class="rectangle hollow">长方形</div>
        <!-- 实心椭圆长方形 -->
        <div class="rectangleellipse solid">实心椭圆长方形</div>
        <!-- 椭圆长方形 -->
        <div class="rectangleellipse hollow">椭圆长方形</div>
        <!-- 实心正方形 -->
        <div class="square solid">实心正方形</div>
        <!-- 正方形 -->
        <div class="square hollow">正方形</div>
        <!-- 实心圆 -->
        <div class="circle solid">实心圆</div>
        <!-- 圆形 -->
        <div class="circle hollow">圆形</div>
        <!-- 半实心圆 -->
        <div class="halfcirclesolid">半实心圆</div>
        <!-- 半圆形 -->
        <div class="halfcirclehollow">半圆形</div>
        <!-- 斜半圆形 -->
        <div class="italichalfcirclehollow">斜半圆形</div>
        <!-- 圆锥 -->
        <div class="cone"></div>
        <p>圆锥</p>
        <!-- 弯月亮 -->
        <div class="moon"></div>
        <p>弯月亮</p>
        <!-- 实心椭圆 -->
        <div class="ellipse solid">实心椭圆</div>
        <!-- 椭圆 -->
        <div class="ellipse hollow">椭圆</div>
        <!-- 四色正方形 -->
        <div class="triangle colorful"></div>
        <p>四色正方形</p>
        <!-- 实心上直角三角形 -->
        <div class="triangle rgtsolidtop"></div>
        <p>实心上直角三角形</p>
        <!-- 实心右直角三角形 -->
        <div class="triangle rgtsolidright"></div>
        <p>实心右直角三角形</p>
        <!-- 实心下直角三角形 -->
        <div class="triangle rgtsolidbottom"></div>
        <p>实心下直角三角形</p>
        <!-- 实心左边直角三角形 -->
        <div class="triangle rgtsolidleft"></div>
        <p>实心左直角三角形</p>
        <!-- 实心左上直角三角形 -->
        <div class="triangle rgtsolidlefttop"></div>
        <p>实心左上直角三角形</p>
        <!-- 实心右上直角三角形 -->
        <div class="triangle rgtsolidrighttop"></div>
        <p>实心右上直角三角形</p>
        <!-- 实心右下直角三角形 -->
        <div class="triangle rgtsolidrightbottom"></div>
        <p>实心右下直角三角形</p>
        <!-- 实心左下直角三角形 -->
        <div class="triangle rgtsolidleftbottom"></div>
        <p>实心左下直角三角形</p>
        <!-- 实心上等边三角形 -->
        <div class="triangle eqsolidtop"></div>
        <p>实心上等边三角形</p>
        <!-- 实心右等边三角形 -->
        <div class="triangle eqsolidright"></div>
        <p>实心右等边三角形</p>
        <!-- 实心下等边三角形 -->
        <div class="triangle eqsolidbottom"></div>
        <p>实心下等边三角形</p>
        <!-- 实心左边等边三角形 -->
        <div class="triangle eqsolidleft"></div>
        <p>实心左等边三角形</p>
        <!-- 平行四边形 -->
        <div class="parallelogram"></div>
        <p>平行四边形</p>
        <!-- 多平行四边形组成的进度条 -->
        <div class="progressbar"><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div><div class="parallelogram"></div></div>
        <p>多平行四边形组成的进度条,鼠标放上去试试^_^</p>
        <!-- 梯形 -->
        <div class="trapezoid"></div>
        <p>梯形</p>
        <!-- 五边形 -->
        <div class="pentagon"></div>
        <p>五边形</p>
        <!-- 六边形 -->
        <div class="hexagon">六边形</div>
        <!-- 八边形 -->
        <div class="octagon">八边形</div>
        <!-- 耳朵 -->
        <div class="angletwo"></div>
        <p>耳朵</p>
        <!-- 飞镖 -->
        <div class="anglefour"><span class="fourmiddle"></span><span class="fourtop"></span><span class="fourright"></span><span class="fourbottom"></span><span class="fourleft"></span></div>
        <p>飞镖</p>
        <!-- 钻石 -->
        <div class="diamond">钻石</div>
        <!-- 心形 -->
        <div class="heart"></div>
        <p>心形</p>
        <!-- 直尾不加圆角和旋转-->
        <!-- 向右下弯尾箭头 -->
        <div class="curvearrowrightbottom"></div>
        <p>右下弯尾箭头</p>
        <!-- 向左上弯尾箭头 -->
        <div class="curvearrowlefttop"></div>
        <p>左上弯尾箭头</p>
        <!-- 蝴蝶结 -->
        <div class="bow"></div>
        <p>蝴蝶结</p>
        <!-- 气球 -->
        <div class="balloon"></div>
        <p>气球</p>
        <!-- 鸡蛋 -->
        <div class="egg"></div>
        <p>鸡蛋</p>
        <!-- 吃货 -->
        <div class="foodie"></div>
        <p>吃货</p>
        <!-- 太极图 -->
        <div class="taiji"></div>
        <p>太极</p>
        <!-- 五角星 -->
        <div class="starfive"></div>
        <p>五角星</p>
        <!-- 六角星 -->
        <div class="starsix"></div>
        <p>六角星</p>
        <!-- 八角星 -->
        <div class="stareight"></div>
        <p>八角星</p>
        <!-- 十二角星 -->
        <div class="startwelve"></div>
        <p>十二角星</p>
        <!-- 提示对话框 -->
        <div class="talkbubble">你好!我是对话框,炫酷的CSS图形分享到此结束喽~</div>
    </div>
</body>

</html>

CSS的强大远远不止于此,各种实现效果自行尝试吧,如果有心可以分享给小指,非常感谢~

点赞6
 标签: css css图形
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
lovirani
 lovirani 约 23 小时前回复
#173
<a href="http://www.awassessment.com/nike-zoom-hyperrev-blue-and-white-shoesk">nike zoom hyperrev blue and white</a> <a href="http://www.websiteopmaat.com/oakley-mens-gascan-sunglasses-matte-black-black-iridium-sunglassesh">oakley mens gascan sunglasses matte black black iridium</a> <a href="http://www.lopifitfl.com/adidas-prougeator-footbtout-boots-uk-chaussuresl">adidas prougeator footbtout boots uk</a> <a href="http://www.aurorefleurs.com/nike-air-max-barkley-noir-safety-orange-chaussuresl">nike air max barkley noir safety orange</a> <a href="http://www.ezedcal.com/m%C3%A4nner-nike-roshe-yeezy-boost-350-schwarz-schuhej">m盲nner nike roshe yeezy boost 350 schwarz</a> <a href="http://www.calsportswear.com/nike-air-jordan-1-wei%C3%9F-and-rot-schuhei">nike air jordan 1 wei脽 and rot</a>
lovirani http://www.lovirani.com/
aldervets
 aldervets 2019-04-18 00:16回复
#172
<a href="http://www.mumbaikichut.com/nike-air-force-1-mid-flyknit-black-white-shoesj">nike air force 1 mid flyknit black white</a> <a href="http://www.ikmsdkravmaga.com/adidas-springblade-pro-s%C3%B8lv-gr%C3%B8n-skoi">adidas springblade pro s酶lv gr酶n</a> <a href="http://www.themusinglens.com/maschio-nike-roshe-run-speckle-nero-gituttio-scarpel">maschio nike roshe run speckle nero gituttio</a> <a href="http://www.startagencia.com/womens-air-jordan-10-yellow-shoesj">womens air jordan 10 yellow</a> <a href="http://www.drjennieward.com/michael-kors-jet-set-dome-crossbody-mkh">michael kors jet set dome crossbody</a> <a href="http://www.genievres.com/kvinners-air-jordan-retro-7-hvit-gull-obuvi">kvinners air jordan retro 7 hvit gull</a>
aldervets http://www.aldervets.com/
mintyschoice
 mintyschoice 2019-04-17 21:37回复
#171
<a href="http://www.egyptmaritime.com/dam%C3%A4nner-nike-roshe-run-slip-gelb-schwarz-schuhej">dam盲nner nike roshe run slip gelb schwarz</a> <a href="http://www.erstube.com/air-jordan-retro-12-lilla-gr%C3%A5-skoh">air jordan retro 12 lilla gr氓</a> <a href="http://www.thecardplayer.com/aidas-boost-clima-chill-rose-bleu-chaussuresh">aidas boost clima chill rose bleu</a> <a href="http://www.theweedaddict.com/stanford-cardinal-47-ncaa-tayor-47-closer-cap-hatl">stanford cardinal 47 ncaa tayor 47 closer cap</a> <a href="http://www.thecampingman.com/adidas-neo-leisure-or-bleu-ciel-chaussuresh">adidas neo leisure or bleu ciel</a> <a href="http://www.otuzbircek.com/nike-lebron-13-mujeres-p%C3%BArpura-blanco-zapatosp">nike lebron 13 mujeres p煤rpura blanco</a>
mintyschoice http://www.mintyschoice.com/
cheapartsale
 cheapartsale 2019-04-16 15:58回复
#170
<a href="http://www.yogafriendly.com/north-face-womens-hyvent-jacket-waterproof-red-northfaceh">north face womens hyvent jacket waterproof red</a> <a href="http://www.btvspassion.com/grey-red-nike-air-max-shoesh">grey red nike air max</a> <a href="http://www.trusejenta.com/nike-air-force-1-rouge-high-chaussuresl">nike air force 1 rouge high</a> <a href="http://www.chatgroupies.com/womens-nike-blazer-low-premium-summit-white-gold-shoesj">womens nike blazer low premium summit white gold</a> <a href="http://www.tamarindoyam.com/houston-rockets-47-nba-all-region-47-mvp-cap-hatk">houston rockets 47 nba all region 47 mvp cap</a> <a href="http://www.tinaandcoco.com/adidas-super-samba-hvid-r%C3%B8d-skoj">adidas super samba hvid r酶d</a>
cheapartsale http://www.cheapartsale.com/
icallvoters
 icallvoters 2019-04-16 05:58回复
#169
<a href="http://www.bowtieorg.com/ralph-lauren-slim-fit-chino-shorts-poloh">ralph lauren slim fit chino shorts</a> <a href="http://www.shaneboothmx.com/nike-air-huarache-pink-and-blue-shoesi">nike air huarache pink and blue</a> <a href="http://www.basarancarpet.com/adidas-15.1-fg-bianca-gituttio-scarpej">adidas 15.1 fg bianca gituttio</a> <a href="http://www.freedhamaal.com/adidas-superstar-classic-wei%C3%9F-hologram-iridescent-schuhej">adidas superstar classic wei脽 hologram iridescent</a> <a href="http://www.borbonecoffe.com/washington-nationals-toddler-hat-hath">washington nationals toddler hat</a> <a href="http://www.cammaara.com/hommes-nike-zoom-kobe-9-or-gris-noir-chaussuresh">hommes nike zoom kobe 9 or gris noir</a>
icallvoters http://www.icallvoters.com/
marieluwasche
 marieluwasche 2019-04-16 00:48回复
#168
<a href="http://www.awassessment.com/nike-air-max-270-svart-gym-r%C3%B8d-hvit-obuvi">nike air max 270 svart gym r酶d hvit</a> <a href="http://www.websiteopmaat.com/nike-magista-obra-acc-fg-volt-negro-rojo-zapatosl">nike magista obra acc fg volt negro rojo</a> <a href="http://www.lopifitfl.com/ray-ban-blue-flash-polarized-sunglassesh">ray ban blue flash polarized</a> <a href="http://www.aurorefleurs.com/los-angeles-chargers-new-era-2017-official-nfl-kids-sideline-9fifty-snapback-cap-hatj">los angeles chargers new era 2017 official nfl kids sideline 9fifty snapback cap</a> <a href="http://www.ezedcal.com/nike-dunk-high-sb-tutti-bianca-scarpej">nike dunk high sb tutti bianca</a> <a href="http://www.calsportswear.com/nike-gt-blazer-schwarz-schuhei">nike gt blazer schwarz</a>
[url=http://www.marieluwasche.com/]marieluwasche[/url]
androidsmith
 androidsmith 2019-04-15 11:54回复
#167
<a href="http://www.goodmedusa.com/nike-hypervenom-phantom-fg-cleats-neon-lilla-svart-obuvi">nike hypervenom phantom fg cleats neon lilla svart</a> <a href="http://www.murskacorp.com/nike-free-run-2-prm-blanco-zapatosl">nike free run 2 prm blanco</a> <a href="http://www.prajansim.com/ray-ban-flash-vs-mirror-lenses-sunglassesh">ray ban flash vs mirror lenses</a> <a href="http://www.pokersurga.com/boston-red-sox-new-era-mlb-pop-reflective-39thirty-cap-hatj">boston red sox new era mlb pop reflective 39thirty cap</a> <a href="http://www.arkmmj.com/nike-air-max-2016-femminile-blu-nero-scarpej">nike air max 2016 femminile blu nero</a> <a href="http://www.butterbroad.com/kobe-10-m%C3%A4nner-schwarz-rot-schuhei">kobe 10 m盲nner schwarz rot</a>
androidsmith http://www.androidsmith.com/
gokartinfo
 gokartinfo 2019-04-15 08:49回复
#166
<a href="http://www.nhhairdesign.com/mujeres-nike-free-5.0-rosado-verde-kurpese">mujeres nike free 5.0 rosado verde</a> <a href="http://www.struysthuis.com/nike-free-run-olive-gr%C3%BCn-schuheg">nike free run olive gr眉n</a> <a href="http://www.golfcavedave.com/jordan-6-infrarojo-negro-outfit-scarpef">jordan 6 infrarojo negro outfit</a> <a href="http://www.yfhfoundation.com/adidas-neo-suede-rosa-marrone-kurpesa">adidas neo suede rosa marrone</a> <a href="http://www.exoticbg.com/hombres-nike-air-max-2017-cuero-p%C3%BArpura-kurpesd">hombres nike air max 2017 cuero p煤rpura</a> <a href="http://www.sushantnayak.com/new-balance-996-blu-oro-obuva">new balance 996 blu oro</a>
gokartinfo http://www.gokartinfo.com/
socabets
 socabets 2019-04-15 02:06回复
#165
<a href="http://www.bgaddiict.com/north-face-vest-womens-sale-northfaceh">north face vest womens sale</a> <a href="http://www.deriogolf.com/nike-free-run-5.0-women-carbon-grey-shoesh">nike free run 5.0 women carbon grey</a> <a href="http://www.poluscompany.com/hommes-adidas-nmd-runner-bleu-chaussuresl">hommes adidas nmd runner bleu</a> <a href="http://www.pariswebjob.com/adidas-zx-750-leather-black-shoesj">adidas zx 750 leather black</a> <a href="http://www.dakvideo.com/dallas-mavericks-new-era-nba-2-tone-gray-black-59fifty-cap-hatk">dallas mavericks new era nba 2 tone gray black 59fifty cap</a> <a href="http://www.freshkeema.com/nike-air-presto-br-unisex-dark-bl%C3%A5-305919-002-skoj">nike air presto br unisex dark bl氓 305919 002</a>
socabets http://www.socabets.com/
actuelvet
 actuelvet 2019-04-14 13:33回复
#164
<a href="http://www.bowtieorg.com/grigio-pelle-converse-high-tops-scarpej">grigio pelle converse high tops</a> <a href="http://www.shaneboothmx.com/rosa-adidas-gazelle-trainers-schuhei">rosa adidas gazelle trainers</a> <a href="http://www.basarancarpet.com/nike-roshe-r%C3%B8d-hvid-bl%C3%A5-skoh">nike roshe r酶d hvid bl氓</a> <a href="http://www.freedhamaal.com/jersey-texas-rangers-nfli">jersey texas rangers</a> <a href="http://www.borbonecoffe.com/all-r%C3%B8d-nike-huarache-sko-obuvk">all r酶d nike huarache sko</a> <a href="http://www.cammaara.com/coach-sadie-flap-medium-grey-crossbody-bags-coachh">coach sadie flap medium grey crossbody bags</a>
actuelvet http://www.actuelvet.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸