倾斜box-shadow（有角度的box-shadow）

来源：互联网发布：淘宝网进入编辑：程序博客网时间：2024/05/07 18:05

思路：
在原来的标签添加一个子集 <子绝父相>;
代码：

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport"        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title>  <style>    .shadow-title {      text-align: center;      font-size: 22px;      height: 50px;      color: #fff;      width: 280px;      line-height: 50px;      position: relative;      background-color: #FEA001;    }    .shadow-title:after{       content: "";       position: absolute;       bottom: 5px;       right: 40px;       width: 75%;       height: 50%;       background-color: #bbb;       -moz-box-shadow: 0 0 10px 10px #bbb;       box-shadow: 0 0 10px 10px #bbb;       -ms-transform: skew(30deg, 4deg);       -moz-transform: skew(30deg, 4deg);       -webkit-transform: skew(30deg, 4deg);       -o-transform: skew(30deg, 4deg);       transform: skew(30deg, 4deg);       z-index: -1;     }  </style></head><body>   <div class="shadow-title">倾斜box-shadow</div></body></html>

阅读全文

0 0