最近在倒腾前端的页面，在某次的需求中我想要这样的一个效果——仅显示INPUT输入框的下边框，和我想象的编写方式不一致，每个标签都有其对应的默认样式，不同的浏览器也有其不同的渲染方式，当然这些知识现在我还没有完全掌握，所以，下面简单记录一下我采用的一种简单实现方式以备后用。

1：渐进式实现的代码

<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>仅显示INPUT标签的下边框</title>

    </head>

    <body>

        <input>默认效果<br><hr>

        <input style="border-left-width:0px">设置左边框宽度为0<br><hr>

        <input style="border-top-width:0px">设置上边框宽度为0<br><hr>

        <input style="border-right-width:0px">设置右边框宽度为0<br><hr>

        <input style="border-bottom-width:0px">设置下边框宽度为0<br><hr>

        <input style="border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0">设置四边边框的宽度全为0<br><hr>

        <input style="border-left-width:0px;border-top-width:0px;border-right-width:0px;border-bottom-color:black">设置左/上/右边框的宽度为0，下边框的颜色为黑色，这是我们想要的效果<br><hr>

    </body>

</html>

2：对比测试的效果

   2-1：Firefox浏览器的渲染效果

   2-2：Chrome浏览器的渲染效果

   2-3：IE9浏览器的渲染效果

3：参考

http://www.w3school.com.cn/css/css_border.asp

4：其他

如果把前端编程比作建房子的话，CSS相关的编程工作就类似于房屋装修，她的重要性是显而易见的，同样的需求风格也有许多不同的实现方式，在这里仅仅简单记录了其中的一种简单实现的方式，如果想掌握更多的实现方式，就去倒腾倒腾吧！毕竟编程比装修房屋容易多了！

仅显示INPUT下边框的更多相关文章

  1. Android之ListView异步加载图片且仅显示可见子项中的图片

    折腾了好多天,遇到 N 多让人崩溃无语的问题,不过今天终于有些收获了,这是实验的第一版,有些混乱,下一步进行改造细分,先把代码记录在这儿吧. 网上查了很多资料,发现都千篇一律,抄来抄去,很多细节和完整 ...

  2. Treeview显示磁盘下的文件，并且可操作

    #region TreeView树形显示磁盘下文件夹 /// <summary> /// IconIndexs类 对应ImageList中5张图片的序列 /// </summary& ...

  3. 使用position:relative制作下边框下的小三角

    在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片. 由于使用背景图片时会有一个问题,选项卡内容字数不同.导致使用背景图片时无法控制 ...

  4. jQuery 隐藏与显示 input 默认值

    分享下jQuery如何隐藏和显示 input 默认值的例子. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  5. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. layer-list实现只有左、右和下边框的圆角矩形

    项目中需要实现如下效果的布局 也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左.右和下边框,颜色为浅灰色. 当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现, ...

  7. html的input输入框边框

    1.输入框边框完全隐藏<input type="text" style="outline:none;border:0" /> 2.input去边框立 ...

  8. 如何让Vim显示dos下的^M符号

    /*********************************************************************** * 如何让Vim显示dos下的^M符号 * 声明: * ...

  9. AS3给显示对象加边框

    给显示对象加边框,可以有以下三种方法1.根据相交路径的缠绕规则的奇偶规则法(使用奇偶缠绕规则时,任何相交路径都交替使用开放填充与闭合填充.如果使用同一填充绘制的两个正方形相交,则不会填充相交的区域.通 ...

随机推荐

  1. ResultSet的getInt(),getString()方法

     数据库tt的examstudent数据表如下:   在MySQL中执行查询语句如下: ResultSet rs = null; String sql="SELECT flow_id,Typ ...

  2. C语言每日一题之No.1

    鉴于在学校弱弱的接触过C,基本上很少编程,C语言基础太薄弱.刚好目前从事的是软件编程,难度可想而知.严重影响工作效率,已无法再拖下去了.为此,痛下决心恶补C语言.此前只停留在看书,光看好像也记不住,C ...

  3. (ORA-12899) 10g数据库导入到11g数据库时报错

    问题: 10g数据库导入到11g数据库时,部分表的字段会出现ORA-12899的报错,如下: IMP-00019: 由于 ORACLE 错误 12899 而拒绝行       IMP-00003: 遇 ...

  4. [cmd]linux 常用命令

    1. 磁盘/文件大小中占用情况 df -h: 磁盘大小占用情况 du -h file: 文件夹大小,du -ah file文件夹内所有文件占用情况 du -sh dir: 可以查看文件夹大小,而不列出 ...

  5. tarjan算法 POJ3177-Redundant Paths

    参考资料传送门 http://blog.csdn.net/lyy289065406/article/details/6762370 http://blog.csdn.net/lyy289065406/ ...

  6. android fragment getActivity()为空的另一个可能

    目前这个方法得到空指针一般来说是因为Activity被销毁导致无法获取,但是开发中又出了一个低级错误导致getActivity为空. 因为我在Fragment的构造函数中调用这个方法了..此时Acti ...

  7. java: org.luaj.vm2.LuaError:XXX module not found lua脚本初始化出错

    我遇到这个错误是因为在引用脚本目录时,设置错了位置.设置成脚本所在目录的上级目录. lua使用和加载初始化方法 在java中使用lua,使用需要引用 luaj-jse-2.0.2.jar 同时需要使用 ...

  8. ylbtech-LanguageSamples-Unsafe(不安全代码)

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-Unsafe(不安全代码) 1.A,示例(Sample) 返回顶部 “不安全代码”示例 ...

  9. ISO14229系列之一：简介

    作者:autogeek 原文链接:http://www.cnblogs.com/autogeek/p/4458591.html 前言 由于工作中经常用到ISO-14229,因此决定对该协议做个总体介绍 ...

  10. 老师你好。使用cordova生成的hellowold 的安卓5.0版本太高。怎么才可以生成4.4的呢？

    你好 在你的应用目录,有个config.xml文件,课程没有介绍每个配置项.你可以增加一项 preference name="android-targetSdkVersion" v ...