遇到如下问题：

　　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. SVN的三种merge方式【转】

    SVN的merge操作是为了保证主干(trunk)和分支(branch)同步,merge方式有: 1.Merge a range of revisions(合并一个范围的版本) 2.Reintegra ...

  2. 【sqli-labs】 less61 GET -Challenge -Double Query -5 queries allowed -Variation4 (GET型 挑战 双查询 只允许5次查询 变化4)

    http://192.168.136.128/sqli-labs-master/Less-61/?id=1' 单引号双括号闭合 192.168.136.128/sqli-labs-master/Les ...

  3. SpringBoot+Mybatis 自动创建数据表（适用mysql）

    Mybatis用了快两年了,在我手上的发展史大概是这样的 第一个阶段 利用Mybatis-Generator自动生成实体类.DAO接口和Mapping映射文件.那时候觉得这个特别好用,大概的过程是这样 ...

  4. Windows提高_2.2第二部分：用户区同步

    第二部分:用户区同步 同步和互斥 同步:就是按照一定的顺序执行不同的线程 互斥:当一个线程访问某一资源的时候,其它线程不能同时访问 多线程产生的问题 #include <stdio.h> ...

  5. Android studio 开发一个用户登录界面

    Android studio 开发一个用户登录界面 activity_main.xml <?xml version="1.0" encoding="utf-8&qu ...

  6. 【eclipse】外部 jar 包导入教程

    JavaWeb 项目中,可以直接将要导入的 jar 程序包复制到你项目下的 WEB-INF/lib 文件夹下,将来程序移动到别的机子上测试时也能正常运行.如果是普通 Java 工程的话,我们可以在项目 ...

  7. 【3】数据筛选3 - BeautifulSoup4

    #目录     1. 开发前准备     2. 不同解析器对比     3. BeautifulSoup4 初始化和节点对象的认识     4. BS4 案例操作:初始化对象文档     5. 节点查 ...

  8. 51nod 1096 距离之和最小 1108 距离之和最小 V2

    [题解] 很显然在一条坐标轴上到各个点距离之和最小的点就是它们的中位数.怎么证明呢?我们假设现在找的某个点x左边有a个点,右边有b个点(a>b).我们把x向左移动d个单位,并保证x左边依然有a个 ...

  9. BNUOJ 19792 Airport Express

    Airport Express Time Limit: 1000ms Memory Limit: 131072KB This problem will be judged on UVA. Origin ...

  10. Leetcode 132.分割回文串II

    分割回文串 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回符合要求的最少分割次数. 示例: 输入: "aab" 输出: 1 解释: 进行一次分割就可将 s ...