今天同事问我一个问题，说下图的效果是怎么实现的

我当时想都没有想说这不就是两条线嘛，他说是一条线用box-shadow做出来的，之前也没有遇到过，觉得很有意思就试了一把。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是

值 描述  
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

注意我把前两个必需属性里面有个允许负值都标成了红色，这是关键。

好了，科普完成，上手后发现正常给值的话线一直会有两边阴影，这样的话是达不到上图的效果的，我们要的是单边的阴影效果。

 <style type="text/css">

     .box-shadow {

       width: 200px;

       height: 100px;

       border-radius: 5px;

       border: 1px solid #ccc;

       margin: 20px;

     }

     .top {

       box-shadow:  -2px  red;

     }

     .right {

       box-shadow: 2px   green;

     }

     .bottom {

       box-shadow:  2px  blue;

     }

     .left {

       box-shadow: -2px   orange;

     }

   style> 
 <div class="box-shadow top">div>

 <div class="box-shadow right">div>

 <div class="box-shadow bottom">div>

 <div class="box-shadow left">div>

效果如下图：

最后的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <style type="text/css">

         .border{

             height: 200px;

             border-left : 1px solid red;

             box-shadow: -1px  black;

         }

     </style>

     <body>

         <div class="border"></div>

     </body>

 </html>

box-shadow做出一条线两种颜色的更多相关文章

  1. Html+Css+Js_之table每隔3行显示不同的两种颜色

    <html> <head> <script type="text/javascript"> /** 最近因项目的需求,有这样的一个问题: 一个t ...

  2. Android TextView里显示两种颜色

    今天介绍一个小技巧,在Android的TextView里设置两种颜色,直接上代码: TextView TV = (TextView)findViewById(R.id.mytextview01); S ...

  3. 一个label两种颜色，一个label两种字体

    -(void)addLabel{ UILabel *label = [[UILabel alloc]init]; label.backgroundColor = [UIColor grayColor] ...

  4. Android代码中设置字体大小，字体颜色，显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  5. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  6. three.js 显示一条线

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. CSS渐变的两种基本用法

    1.线性渐变(linear-gradient) 基础用法:background:linear-gradient(angle,start-color,soft-line,end-color); 依次解释 ...

  8. mysql批量更新的两种方式效率试验<二>

    Mysql两种批量更新的对比 简介: mysql搭载mybits框架批量更新有两种方式,一种是在xml中循环整个update语句,中间以‘:’隔开,还有一种是使用case when 变相实现批量更新, ...

  9. mybatis批量保存的两种方式（高效插入）

    知识点:mybatis中,批量保存的两种方式 1.使用mybatis foreach标签 2.mybatis ExecutorType.BATCH 参考博客:https://www.jb51.net/ ...

随机推荐

  1. Python 进程间数据交互

    进程间通信:进程之间必须需要中间件. 不同进程间内存是不共享的,要想实现两个进程间的数据交换     Queues:实现传输两个进程的数据 线程queue,访问数据只能在一个进程内进行线程与线程之间的 ...

  2. 剑指offer（16）合并两个排序的链表

    题目描述 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 题目分析 重点抓住这两个链表都是单挑递增的,因此我们只需要不断地比较他们的头结点就行,明显这是个 ...

  3. js运行机制详解：event loop

    总结 阮一峰老师的博客 一.为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程 那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript ...

  4. Redhat配置yum源（使用阿里云yum Repo）

    1. 查看版本号和系统类别: cat /etc/redhat-release archor cat /etc/issue && arch 2.检查yum是否安装,以及安装了哪些依赖源并 ...

  5. please select android sdk（出现小红叉）

    问题原因: 在项目中通过 git 协同开发,项目是 kotlin 与 Java 混合开发.在 build.gradle 中添加依赖之后就出现这个问题了,点击运行无法编译. 在网上找了各种解决办法都没能 ...

  6. ionic调用手机系统的拨打电话

    android调用如下: 在config.xml中添加 <access origin="tel:*" launch-external="yes" /> ...

  7. 联盟链初识以及Fabric环境搭建流程

    这篇文章首先简单介绍了联盟链是什么,再详细的介绍了Fabric环境搭建的整个流程. 区块链分类: 以参与方式分类,区块链可以分为:公有链.联盟链和私有链. 定义: 我们知道区块链就是一个分布式的,去中 ...

  8. windows server2008 IIS搭建网站简易教程（阿里云）

    最近搞了个阿里云服务器 想着需要用这个服务器学点东西,故而想着把自己之前写的网站能部署上去,虽然自己是做前端移动开发,但是对这个服务器的东西也很感兴趣 第一步 配置阿里云入口规则 如图开放81 80 ...

  9. google sitemap

    引言 刚开始以为要一个绿色快速通道网页,涵盖常用的地址链接,以便于google的爬虫统计数据,然后看了google sitemap站点文档,原来站点地图是一种文件,您可以通过该文件列出您网站上的网页, ...

  10. Android之Fragment(碎片)方方面面

    Fragment简介碎片(Fragment)是一种可以嵌入到活动当中的UI片段,它能让程序更加合理和充分的利用大屏幕的空间. Fragment的生命周期 它与Activity生命周期的关系: 可以看到 ...