遇到如下问题：

　　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. AMH V4.5 – 基于AMH4.2的第三方开发版

    AMH V4.5[基于AMH4.2第三方开发版]重新部署了一次安装脚本,修改一系列BUG,已完美支持CENTOS7,树莓派,Fedora,Aliyun,Amazon,debian,Ubuntu,Ras ...

  2. golang 自定义time.Time json输出格式

    工作中使用golang时,遇到了一个问题.声明的struct含time.Time类型.使用json格式化struct时,time.Time被格式化成”2006-01-02T15:04:05.99999 ...

  3. DiscuzX2.5数据库字典 值得学习

    pre_common_admincp_cmenu – 后台菜单收藏表title => ‘菜单名称’url => ‘菜单地址’sort => ’0′ COMMENT ‘菜单类型,备用’ ...

  4. mac系统，鼠标移动太慢

    to check your speed: defaults read -g com.apple.mouse.scaling to set your speed defaults write -g co ...

  5. java虚拟(一)--java内存区域和常量池概念

    一.java运行时数据区 也可以称为java内存区域,和java内存模型不是一回事,不要弄混,这里基于jdk1.8之前 1.1.方法区 线程共享,类装载过程中产生的java.lang.Class对象保 ...

  6. Robot Framework（九） 执行测试用例——基本用法

    3.1基本用法 Robot Framework测试用例从命令行执行,默认情况下,最终结果是XML格式的输出文件和HTML 报告和日志.执行后,可以组合输出文件,然后使用rebot工具进行后处理. 3. ...

  7. Spring Boot 创建hello world项目

    Spring Boot 创建hello world项目 1.创建项目 最近在学习Spring Boot,这里记录使用IDEA创建Spring Boot的的过程 在1出勾选,选择2,点击Next 这里填 ...

  8. Spring Security 介绍与Demo

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

  9. 洛谷——P2236 [HNOI2002]彩票

    P2236 [HNOI2002]彩票 给你$m$个数,从中挑$n$个数,使得这$n$个数的倒数之和恰好等于$\frac{x}{y}$ 常见的剪纸思路: 如果当前的倒数和加上最小可能的倒数和$>$ ...

  10. Python&机器学习总结(二)

    ① Python中的Sort Python中的内建排序函数有 sort()和sorted()两个 list.sort(func=None, key=None, reverse=False(or Tru ...