遇到如下问题：

　　UI 给的设计，某部分，上边框为 图片，下边框为灰色横线。

　　看到这个的第一反应是，上边框用 border-image ,为了只让上边框显示图片，所以只给上边框宽度为所需宽度，我的图是 3px；然后设置 图片拉伸，如下：

　　（我用的rem，我的根节点设置的字号为 20px）

　　

　　设置完上边框之后，我试图用：bordr-bottom: 1px solid #ccc; 可是发现没有用....尴尬...所以我灵机一动，想到使用阴影来设置下边框，设置阴影的偏移量为0，阴影宽度也为0，如下：

　　

　　所以就完美实现如下效果：

　　

border-image 和 border-color 不能同时使用问题的更多相关文章

  1. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  2. border:0; VS border:none;

    border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...

  3. CSS中设置border:none和border:0的区别

    在我们设置CSS的时候,对标签元素不设置边框属性或者取消边框属性一般设置为:border:none;或border:0;两种方法均可. border:none;与border:0;的区别体现有两点:一 ...

  4. border:none;和border:0;的区别

    一.是理论上的性能差异 [border:0;]把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已 ...

  5. border:none与border:0的区别

    border:none与border:0的区别体现为两点:一是理论上的性能差异,二是浏览器兼容性的差异. 性能差异: [border:0;]把border设为“0”像素效果等于border-width ...

  6. 简单告诉你-"border:0"与"border:none"的区别

    "border:0"与"border:none"的差异主要体现在性能差异和兼容差异.1.性能差异"border:0"表示把border定义为 ...

  7. border:0与border：none区别与联系

    联系:前台效果均实现了无边框 区别: 要解释区别,首先得先介绍一下border这个属性. border是一个简写属性.可以设置如下属性 border-width border-style border ...

  8. CSS深入了解border：利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  9. 有border和没有border是两回事

    id="box"设立border的话,里边的p样式为display:block;margin-top:20px; 如果你把margin-top的值不断添加的话,会显示为距borde ...

  10. border:none;与border:0;的区别

    border:none表示边框样式无,border:0表示边框宽度为0;当定义了border:none,即隐藏了边框的显示,实际就是边框宽度为0. 当定义边框时,必须定义边框的显示样式.因为边框默认样 ...

随机推荐

  1. quartz在集群环境下的最终解决方案

    在集群环境下,大家会碰到一直困扰的问题,即多个 APP 下如何用 quartz 协调处理自动化 JOB . 大家想象一下,现在有 A , B , C3 台机器同时作为集群服务器对外统一提供 SERVI ...

  2. Linux下查看CPU信息、机器型号等硬件信息命令

    Linux下查看CPU信息.机器型号等硬件信息命令 编写一个bash脚本: vim info.sh #!/bin/bash cat /etc/issue echo "____________ ...

  3. git学习（3）----git 新建分支并提交本地代码到远程分支

    一.步骤 1.在gitlab上创建一个issue,issue一般来说是版本发布说明.比如本次更新了什么功能,修复了什么bug什么的. 2.然后在本地创建一个branch,或者直接在gitlab上申请m ...

  4. enote笔记语言（2）（ver0.4）

    why not(whyn't)                    为什么不(与“why”相反对应,是它的反面)   how对策 how设计   key-memo:                 ...

  5. 【Linux软件安装】

    安装约定 软件安装在/opt目录下,opt目录规范: modules:软件安装的目录 softwares:软件包目录 tools:工具目录 datas:数据目录 如果出现 No XXX package ...

  6. buf.readDoubleBE()

    buf.readDoubleBE(offset[, noAssert]) buf.readDoubleLE(offset[, noAssert]) offset {Number} 0 <= of ...

  7. 作为一个程序员，分享一下我自己常用的几款非常方便的chrome插件

    作为一名资深码农,结合身边一群IT民工的真实体验,小编有那么一点权威给各位推荐几款程序员必备.常用的chrome扩展插件. 1.Click&Clean Click&Clean插件可以监 ...

  8. Latex Notes

    latex Table of Contents 1. Presentation/Slides with Beamer 2. Drawing in LaTex With TikZ 3. Tracked ...

  9. Java基础学习总结（87）——坚持写Java等技术类博客的好处

    1.加深对技术点的理解 每天写博客,可以加深对技术点的理解,假如工作中,对某个技术点运用的不熟,当你通过博客的形式写出来,这个过程中,遇到不懂的知识点,你就会查阅相关的资料,弄明白他. 2.自己日后用 ...

  10. String与StringBuffer,StringBuilder

    在java中有3个类来负责字符的操作. 1.Character 是进行单个字符操作的, 2.String 对一串字符进行操作.不可变类. 3.StringBuffer 也是对一串字符进行操作,但是可变 ...