遇到如下问题：

　　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. Farseer.net轻量级开源框架 入门篇：分类逻辑层

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 入门篇: 缓存逻辑层 下一篇:Farseer.net轻量级开源框架 入门篇: 添加数据详解 ...

  2. https与http的访问，应对苹果ATS验证问题

    为应对2017年1月1日苹果ATS的问题,微信.微博等等APP要求挂载的网页必须https访问,需要添加ssl认证. 一.SSL认证 选取了阿里云提供的免费SSL,使用期限为一年.电话咨询阿里客服,免 ...

  3. c3p0参数详解

    <!--当连接池中的连接耗尽的时候c3p0一次同时获取的连接数.Default: 3 --> <property name="acquireIncrement"& ...

  4. HDU_1018_n（1e7）的阶乘的结果的位数

    http://acm.hdu.edu.cn/showproblem.php?pid=1018 Big Number Time Limit: 2000/1000 MS (Java/Others)     ...

  5. Java基础(四)--接口和抽象类

    接口和抽象类能够体现OOP的抽象,而接口和抽象类也是日常开发中经常用到的 抽象方法: 抽象方法就是被abstract修饰的方法,只有声明,没有实现,也就是没有方法体 public abstract v ...

  6. css3属性之-webkit-margin-before

    当没有对浏览器进行css边距初始化时,在web-kit浏览器上会出现下面的浏览器默认边距设置: ul, menu, dir { display: block; list-style-type: dis ...

  7. 第一章 Linux命令行简介

    1 Linux系统命令操作语法的格式 命令_[参数选项]_[文件或路径]    其中 _ 至少一个空格    如:rm -f /etc/hosts    其中/etc/hosts完整路径不带空格   ...

  8. cmake 学习笔记（一） buildsystem

    参见网址: http://www.cmake.org/cmake/help/latest/manual/cmake-buildsystem.7.html Introduction 基于CMake的构建 ...

  9. BZOJ 3277 串 & BZOJ 3473 字符串 (广义后缀自动机、时间复杂度分析、启发式合并、线段树合并、主席树)

    标签那么长是因为做法太多了... 题目链接: (bzoj 3277) https://www.lydsy.com/JudgeOnline/problem.php?id=3277 (bzoj 3473) ...

  10. JavaSE 学习笔记之包装类（十七）

    基本数据类型对象包装类:是按照面向对象思想将基本数据类型封装成了对象. 好处: 1:可以通过对象中的属性和行为操作基本数据. 2:可以实现基本数据类型和字符串之间的转换. 关键字   对应的类名 by ...