井井客

搜索

利用伪类制作凸起的背景带边框

小伙伴要做的一个效果,不考虑兼容的情况下,用CSS伪类很好实现,感觉自己对样式还是更熟悉一点啦~

利用伪类制作凸起的背景带边框

整体代码如下:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>利用伪类制作半个圆角边框</title>
        <style>
            * { padding: 0; margin: 0;}
            body {
                overflow: hidden;
            }
            .header {
                margin-top: 50px;
                height: 200px;
                background: #f2f2f2;
                border-top: 2px solid #ddd;
            }
            .logo {
                width:80px;
                height: 80px;
                position: relative;
                top: -20px;
                margin: 0 auto;
                padding: 12px;
            }
            .logo img {
                position: relative;
                z-index: 3;
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }
            .logo:after,.logo:before {
                content: '';
                display: block;
                position: absolute;
                left:0;
            }
            .logo:after {
                top: 0;
                width: 100px;
                height: 100px;
                border: 2px solid #ddd;
                border-radius: 20px;
                background: #f2f2f2;
            }
            .logo:before {
                bottom: 0;
                width: 104px;
                height: 84px;
                background: #f2f2f2;
                z-index: 2;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="logo">
                <img src="http://www.qqzhi.com/uploadpic/2014-09-14/223654362.jpg" />
            </div>
        </div>
    </body>
</html>

稍微说一点,这个利用的就是CSS的伪类,一个效果用到了三层的结构:图片、after伪类、before伪类。将图片放在最上层,after伪类放在最下层并制作一个大的完整的圆角与边框,before伪类放在中间制作一个不带边框的方形图覆盖住after下半部分。

这样就能实现上面的效果了~是不是很简单啊~

文章TAG:CSS

作者:井井客原创来源:原创
本文标题:利用伪类制作凸起的背景带边框
本文链接:http://www.jingjingke.com/c/03308.html

上一篇:七牛云JS上传文件DEMO
下一篇:mermaid帮你更轻松实现SVG流程图绘制

文章分类

相关阅读

随便看看