CSS3 Boxshadow

来源：互联网发布：读心术的书籍排名知乎编辑：程序博客网时间：2024/06/06 08:46

    <!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>

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

技巧3：

语法：box-shadow: [x偏移] [y偏移] [阴影模糊宽度] [阴影宽度] [颜色]，并且还能添加多个阴影，使用逗号隔开。

这里写图片描述

当然你还可以继续增加，四重边框，五重边框……都不再是问题啦。另外，还能加圆角，阴影会贴紧内层div。

使用这种方法，有一个缺点就是，不支持虚线边框。

解法三：使用outline（只能支持两重边框）
这里写图片描述
使用这种方法的缺点就是，只能支持两层的边框，而且还不能根据容器的border-radius自动贴合。

来源： https://gold.xitu.io/post/583e97c961ff4b006b662f5e

0 0