遇到如下问题：

　　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. linux gcc编译protocol

    gcc -c test.pb-c.c//生成test.pb-c.o文件 gcc -c udp_socket_server.c//生成udp_socket_server.o gcc -o test1 u ...

  2. Farseer.net轻量级开源框架 中级篇：执行SQL语句

    导航 目   录:Farseer.net轻量级开源框架 目录 上一篇:Farseer.net轻量级开源框架 中级篇: 事务的使用 下一篇:Farseer.net轻量级开源框架 中级篇: DbFacto ...

  3. java web 学习笔记 - jsp用的文件上传组件 SmartUpload

    ---恢复内容开始--- 1. SmartUpload 此控件在jsp中被广泛的使用,而FileUpload控件主要是用在框架中 2. 如果想要使用,需要在tomcat的lib目录中,将SmartUp ...

  4. 【Linux】 JDK安装及配置 (linux-tar.gz版)

    安装环境:Linux(CentOS 7 64位 版) JDK安装:tar.gz为解压后就可以使用的版本,这里使用jdk-8u211-linux-x64.tar.gz版,安装到/usr/java/(us ...

  5. day14-二分法、匿名函数、内置函数以及面向过程编程

    目录 二分法 匿名函数 内置函数 面向过程编程 二分法 二分法查找适用于数据量较大时,但是数据需要先排好顺序.主要思想是:(设查找的数组区间为array[low, high]) (1)确定该区间的中间 ...

  6. Java线程处理

    Java线程处理 创建线程 继承Thread类 public class TestThread extends Thread{ public void run(){ System.out.printl ...

  7. 荷兰国旗问题、快排以及BFPRT算法

    荷兰国旗问题 给定一个数组arr,和一个数num,请把小于num的数放数组的左边,等于num的数放在数组的中间,大于num的数放在数组的右边.要求额外空间复杂度O(1),时间复杂度O(N). 这个问题 ...

  8. Spring Security 介绍与Demo

    一.Spring Security 介绍 Spring Security 是针对Spring项目的安全框架,也是Spring Boot底层安全模块的默认技术选型.我们仅需引入spring-boot-s ...

  9. input file 美化的方法

    css input[type=file] 样式美化,input上传按钮美化 2014年8月29日 113210次浏览 由于明天公司组织出去游玩,今天把这两天的博客都写了吧,今天的内容是input[ty ...

  10. 「 HDU P3555 」 Bomb

    # 题目大意 给出 $\text{T}$ 个数,求 $[1,n]$ 中含 ‘49’ 的数的个数. # 解题思路 求出不含 '49' 的数的个数,用总数减去就是答案. 数位 $DP$,用记忆化来做. 设 ...