一般情况下,我们给块状元素(四边形)添加阴影样式,直接用css box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);就可以了,但是总有一些需求是那么的特别,例如下图:

要求给这样的梯形盒外围加阴影,第一眼感觉也没啥特别的,但是搞起来就知道多烦了。反正我是折腾了好一会儿,最后只能用下面这样实现了。

HTML和CSS(sass)代码:

        <div class="m-tab-page-box cf">
<div class="m-tab-page">
<a class="m-page-item" href="">Set Physical Presence </a>
<a class="m-page-item current" href="">Set Prodcut Tax Code </a>
</div>
<div class="m-tab-page-cover"></div>
</div> <div class="tab-search-block">
<div style="height: 160px;"></div>
</div>
.m-tab-page-box{
position: relative;
}
.m-tab-page-cover{
width: 100%;
height: 3px;
background: #fff;
position: absolute;
bottom: -3px;
}
.m-tab-page {
float: left;
border-bottom: none;
margin-bottom: 0;
display: inline-block;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
height: 38px; .m-page-item {
display: block;
padding: 10px 20px;
float: left;
color: #222;
font-weight: bold;
margin-bottom: 0;
background: #edf0f2; &.current {
background: #fff;
border: none; }
} } .tab-search-block{
background: #fff;
box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
margin-bottom: 20px; }

实现思路:'.m-tab-page'设成行内元素,加阴影,'.tab-search-block'加阴影,重点是在'.m-tab-page-box'中添加一个'.m-tab-page-cover',该元素的作用就是遮住'.m-tab-page'元素的底部阴影,注意'.m-tab-page-cover'的高度为盒阴影扩散的距离。

备注:
如果哪位有更好的思路,烦请留言说下啊。

(实战)多边形,梯形盒阴影css实现技巧的更多相关文章

  1. CSS 阴影动画优化技巧一则

    本技巧来自这篇文章 -- How to animate box-shadow with silky smooth performance 本文不是直译,因为觉得这个技巧很有意思很有用,遂起一文. bo ...

  2. CSS 常用技巧

    概述 相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊文本,样式重置,清除浮动,通用媒体查询,自定义选择文本,强制出现滚动条,固定头部和页脚 ...

  3. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  4. 转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解

    目标大纲 文章转载 CSS3 经典教程系列:CSS3 盒阴影(box-shadow)详解 IE中CSS-filter滤镜小知识大全 CSS实现跨浏览器兼容性的盒阴影效果

  5. 2天驾驭DIV+CSS (技巧篇)(转)

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  6. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  7. [css 揭秘]:CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

  8. 高手总结CSS书写技巧

    这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果.这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack ...

  9. 常用的CSS小技巧

    实际开发过程中会遇到一些需要用CSS小技巧处理的布局问题,现在分享几个个人工作中遇到的小问题和解决方案. 1.inline元素间的空白间隙 这里要介绍一个神器font-size:0. 如果你写了个列表 ...

随机推荐

  1. AngularJS——基础小知识(一)

    $time0ut :定时器 $rootscope :全局的 $scope : 局部的作用域:   它下面的方法: $scope.$watch $scope.$apply   1)$scope.$wat ...

  2. springboot+dubbo基于zookeeper快速搭建一个demo

    由于小编是在windows环境下搭建的,故该示例均为在windows下操作,这里只是提供一个快速搭建思路,linux操作也基本上差不多. 首先本示例的dubbo是基于zookeeper发布订阅消息的, ...

  3. [转帖]怎样选择(FC-SAN)光纤通道(存储)交换机

    怎样选择(FC-SAN)光纤通道(存储)交换机 https://blog.csdn.net/sinat_30171789/article/details/50510936 交换机的种类非常多...   ...

  4. MySQL-快速入门(12)备份、还原

    1.数据备份 1>使用MySQLdump命令备份(主要的方式) //备份数据库中某张表(去掉表的限定,就是备份指定数据库)//备份脚本可以重新创建表及插入数据mysqldump -u user ...

  5. Node.js连接RabbitMQ,断线重连,动态绑定routing key

    RabbitMQ官方提供的教程https://www.rabbitmq.com/tuto...,是基于回调的. 下面将给出基于Promise式的写法.并且实现动态的队列绑定 初始化配置 const a ...

  6. 100行代码撸完SpringIOC容器

    用过Spring框架的人一定都知道Spring的依赖注入控制反转;通俗的讲就是负责实例化对象 和 管理对象间的依赖 实现解耦. 我们来对比两段代码: UserController{ UserServi ...

  7. java调用webservice接口 几种方法

    webservice的 发布一般都是使用WSDL(web service descriptive language)文件的样式来发布的,在WSDL文件里面,包含这个webservice暴露在外面可供使 ...

  8. C 调试 gdb常用命令

    gdb常用命令: [root@redhat home]#gdb 调试文件:启动gdb (gdb) l :(字母l)从第一行开始列出源码 (gdb) break n :在第n行处设置断点 (gdb) b ...

  9. Batchsize与learning rate

    https://www.zhihu.com/question/64134994 1.增加batch size会使得梯度更准确,但也会导致variance变小,可能会使模型陷入局部最优: 2.因此增大b ...

  10. Codeforces 矩阵题 题单

    Matrix CF 166E Tetrahedron dp方程设为 f[i] 最后在 D点,g[i] 表示最后不在D点.最后 g[] 可以通过矩阵加速数列求得,数据可以强化,复杂度 \(O(logn) ...