css之单边阴影

需求:在网上找的其他博客上说单边阴影需要牺牲掉模糊,实际上牺牲掉模糊直接用border不就好了

效果:

原理:

1.在左边的外阴影就是右边的内阴影

2.将box-shadow写在before或者after上面,然后将父元素设置为overflow:hidden

代码:

#footer{
position: relative;
z-index: 800;
height: 27px;
overflow: hidden;
}
&:before{
content: "";
position: absolute;
left:0;
width: 100%;
height:0;
box-shadow: 0 0 6px 4px rgba(0,0,0,0.1);
background:#eee;
}

钻研不易,转载请注明出处。。。。。。

css之单边阴影的更多相关文章

  1. CSS 实现单边阴影

    box-shadow: 0px -15px 10px -15px #111; 五个值分别为:x y blur spread color 将 spread 设置成 blur 的负值即可 这种只适用于 o ...

  2. css实现动态阴影、蚀刻文本、渐变文本

    css实现动态阴影 创建与类似的阴影box-shadow 而是基于元素本身的颜色. 代码实现: <div class="dynamic-shadow-parent"> ...

  3. CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)

    /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius ...

  4. CSS之弧形阴影

    简述 网页上经常会出现一些弧形的阴影效果,看起来很漂亮,下面我们来讲述下如何用CSS来实现一个弧形阴影. 简述 阴影 效果 注释 标题 效果 源码 合并 效果 源码 阴影 效果 首先实现一个简单的阴影 ...

  5. 酷炫,用Html5/CSS实现文字阴影

    前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过 ...

  6. css border 三角形阴影(不规则图形阴影) & 多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...

  7. CSS实现文字阴影的效果

    CSS中有两种阴影效果,一种是DropShadow(投影),另一种是Shadow(阴影).1.DropShadow语法:{FILTER:DropShadow(Color=color,OffX=offX ...

  8. css设置边框阴影;box-shadow的使用

    html代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  9. css生成彩色阴影

    通常用css生成单色或者同色系的的阴影(box-shadow),其实可以通过巧妙的利用 filter: blur 模糊滤镜,可以生成渐变色或者说是颜色丰富的阴影效果,如图: 原理: 利用伪元素,生成一 ...

随机推荐

  1. Vuejs项目的Webpack2构建优化

    最近在做的项目因为相对较大(打包有100多个chunk),在build构建的时候速度一直上不去,甚是烦恼.由于用的是vue-cli的webpack2模板,一开始并没有想着要对其进行优化,一直觉得是we ...

  2. druid:阿里巴巴开源,数据库连接池管理

    官方地址:https://github.com/alibaba/druid

  3. mysql 事务隔离级别详解

    事物的 隔离级别,说简单非常简单(新手也能说出 是个隔离级别 和 影响),说男也非常难.(很多 有几年编程 经验的程序员依旧搞不清楚) 废话不多少 直接开始: 事务的隔离级别 是用来描述 事务的读关系 ...

  4. phper必知必会之数组指针(四)

    数组指针 1.介绍几个数组指针的函数 current() - 返回数组中的当前单元 end() - 将数组的内部指针指向最后一个单元 prev() - 将数组的内部指针倒回一位 reset() - 将 ...

  5. 电路交换vs分组交换

    电路交换 交换:动态分配传输线路资源. 须经过:建立连接 -> 通话 -> 释放连接. 特点:传输效率低(大部分时间空闲). 分组交换 位于网络边缘的主机&位于网络核心的路由器都是 ...

  6. asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文

    近公司项目上在开发微信服务号的接口,需要给用户回复图片或语音或视频,这个时候就需要用到 上传下载多媒体文件接口,微信在这方面推荐采用的是开源函数库curl实现的,CURL项目包括很多版本,我主要测试的 ...

  7. sql 防注入 维基百科

    http://zh.wikipedia.org/wiki/SQL%E8%B3%87%E6%96%99%E9%9A%B1%E7%A2%BC%E6%94%BB%E6%93%8A SQL攻击(SQL inj ...

  8. bzoj2026: [SHOI2009]Coin

    Description Constantine刚结束在MySky Island的度假,正准备离开的时候,他想送给她的好朋友YY一份特别的礼物——MySky Island上特别的手工艺品宝石纪念币.宝石 ...

  9. ubuntu中为Pycharm添加快捷启动方式

    1. sudo gedit /usr/share/applications/Pycharm.desktop 2.在文件中添加: [Desktop Entry] Type=Application Nam ...

  10. JAVA的非对称加密算法RSA——加密和解密

    原文转载至:https://www.cnblogs.com/OnlyCT/p/6586856.html 第一部分:RSA算法原理与加密解密 一.RSA加密过程简述 A和B进行加密通信时,B首先要生成一 ...