CSS3 Boxshadow

最新推荐文章于 2025-01-19 02:41:45 发布

转载最新推荐文章于 2025-01-19 02:41:45 发布 · 493 阅读

标签

#css3

CSS 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用CSS的box-shadow属性及before、after伪元素来绘制各种形状，并探讨实现多重边框的方法。文章还对比了不同技术方案的特点。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .icon-img {
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        width: 90px;
        height: 80px;
        border: 5px solid;
        border-radius: 10px;
        color: #f00;
        overflow: hidden;
    }
    .icon-img:before,.icon-img:after {
        content: '';
        pointer-events: none;
        position: absolute;
    }
    .icon-img:before {
        width: 10px;
        height: 10px;
        top: 18px;
        right: 20px;
        box-shadow: inset 0 0 0 1em;
        border-radius: 50%;
    }
    .icon-img:after {
        width: 60px;
        height: 50px;
        left: 0;
        bottom: -27px;
        box-shadow: inset 0 0 0 50px,30px -20px 0 0;
        transform: rotate(45deg);
    }
    </style>
    </head>
    <body>
    <div class="icon-img"></div>
    </body>
    </html>

效果如下：
这里写图片描述

利用boxshadow 以及before、after伪元素可实现形状的绘制。
实例：

    <style>
    .contact{width:100%; height:147px; background:#000;position:relative;}
    .contact:before,.contact:after{content: '';pointer-events: none;position: absolute;}
    .contact:before{width:20px; height:20px;background:rgba(204,204,204,.4);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);right:-10px; top:-10px;}
    .contact:after{width:20px; height:20px;color:#fad699;left: -15px;top: -60px;box-shadow: inset 0 0 0 10px rgba(243,153,0,.2),5px 35px 0 3px ;-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);z-index:-2;}
    </style>
    <body>
      <div class="contact"></contact>
    </body>