遇到如下问题：

　　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. TCP/IP和UDP的比较

    TCP.UDP详解 1.传输层存在的必要性 由于网络层的分组传输是不可靠的,无法了解数据到达终点的时间,无法了解数据未达终点的状态.因此有必要增强网络层提供服务的服务质量. 2.引入传输层的原因 面向 ...

  2. 扩增子分析解读4去嵌合体 非细菌序列 生成代表性序列和OTU表

    本节课程,需要先完成 扩增子分析解读1质控 实验设计 双端序列合并 2提取barcode 质控及样品拆分 切除扩增引物 3格式转换 去冗余 聚类   先看一下扩增子分析的整体流程,从下向上逐层分析 分 ...

  3. 我的第一次"闭包"应用

    结论: 闭包可以当作强类型语言如C++.Java的全局变量使用,非常巧妙 需求: ssm项目,使用pagehelper分页,在写前一页.后一页.第一页.最后一页等页面跳转时,遇到了问题,如果查询全部的 ...

  4. Luogu P2822 组合数问题

    思路 组合数的话,首先肯定是想到杨辉三角啊.不傻的都知道要预处理一张组合数表,但是你以为这样就可以了吗???显然,不可能的.那询问的时候复杂度就成了$\large{O(t*n)}$,凉凉.那咋办,用二 ...

  5. POJ3616 Milking Time【dp】

    Description Bessie is such a hard-working cow. In fact, she is so focused on maximizing her producti ...

  6. mysql5.7报Access denied for xxx@localhost 的解决

    使用root用户登录mysql数据库若如下报错 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor ...

  7. python OOP(2)

    调用方法有两种形式 实例调用 直接调用后序参数即可 类调用 调用时需要先加上实例 示例 class test1: def pt(self,txt): #定义函数 test1.txt=txt print ...

  8. Re0:DP学习之路 数塔 HDU - 2084（基础递推）

    解法 首先是输入的问题,输入的时候还要注意每一层都有多少个 然后是怎么求解,一般求解首先要考虑顺序,是正序还是倒序 如果这个题是正序的话那么最终还需要将最后一行进行一次找max的运算 如果是倒序的话那 ...

  9. LinuxMint19.1安装搜狗拼音输入法

    Installation 1.到搜狗拼音输入法官网下载Linux版. 2.使用dpkg命令安装deb软件包 $ sudo dpkg -i sogoupinyin_2.2.0.0108_amd.deb ...

  10. [K/3Cloud] 首页增加一个自定义页签及页面内容

    在K3Cloud登录后的门户首页增加一个页签,如增加一个[BBS论坛] 2013-7-30 11:18:51 上传 下载附件 (84.81 KB)  增加页签 可以这么来做: 进入BOS IDE ,找 ...