遇到如下问题：

　　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. 使用Spring框架的步骤

    “好记性,不如烂笔头”.今天正式接触了Spring框架,第一次接触Spring框架感觉Spring框架简化了好多程序代码,开发效率大大提高.现在介绍使用Spring框架的步骤.(使用spring-fr ...

  2. python学习笔记(2)——练习小程序之 " input " 隐藏陷阱

    练习小程序之 ----------" input " 隐藏陷阱 age=input('please enter your age:') if age>=18: print(' ...

  3. jsp学习笔记 - 内置对象 pageContext

    1.pageContext几乎可以操作所有的页面内置对象 pageContext.getRequest();    得到的对象只是属于ServletRequest类,httpServletReques ...

  4. ASP MVC

    V-view 显示层 C-controller 控制层 M-model 模型 D-database 数据库 S-Service 服务 D-Database/Dao 数据库/访问数据库的方法 View即 ...

  5. NGS数据格式介绍

    一般情况下,从Illumina平台上得到的测序,其数据格式是Fastq格式,可以称之为原始数据(Raw data).事实上直接的下机数据是显微拍摄得到的图像信息.但是一般都会用Bcl2Fastq软件将 ...

  6. ThinkPHP---layer插件

    [概论] (1)layer是基于jquery开发的一款美化弹框的插件,主要用于弹框效果的交互.但其他功能和组件也日益完善 官网:http://layer.layui.com 在线手册:http://w ...

  7. vuex与redux,我们都一样

    vuex与redux的主要区别: redux:生成的全局数据流是通过每个组件的props逐层传递到各个子组件的,通过@connect装饰器绑定在this.props上面. vuex :生成的全局数据则 ...

  8. S-HR之代码创建临时表并插入数据

    ... private String tempTab1 = null; //临时表EcirrWithPPTempTable public String getTempTable() { String ...

  9. SQL删除重复数据(根据多个字段)，pandas的nan存入数据库报错

    delete from M_FACTOR_DATA_TEST a where (a.factor_id,a.data_date,a.stock_code) in (select factor_id,d ...

  10. 干货分享--iOS及Mac开源项目和学习资料【超级全面】

    原文出处:codecloud http://www.kancloud.cn/digest/ios-mac-study/84557