博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
仅显示INPUT下边框
阅读量:6852 次
发布时间:2019-06-26

本文共 634 字,大约阅读时间需要 2 分钟。

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

 

1:渐进式实现的代码

        
仅显示INPUT标签的下边框 默认效果

设置左边框宽度为0

设置上边框宽度为0

设置右边框宽度为0

设置下边框宽度为0

设置四边边框的宽度全为0

设置左/上/右边框的宽度为0,下边框的颜色为黑色,这是我们想要的效果

2:对比测试的效果

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

 

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

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

 

3:参考

4:其他

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

 

转载地址:http://vwyyl.baihongyu.com/

你可能感兴趣的文章
工程DHCP配置
查看>>
GIL(全局解释器锁)与互斥锁
查看>>
我的友情链接
查看>>
Git常用操作及分支
查看>>
关于一种求最大公约数的算法的分析与证明
查看>>
微信授权莫名创建用户数据失败的原因
查看>>
网络高手修身
查看>>
JavaWeb综合案例-键盘模拟
查看>>
Android Day03-SQLite数据库操作及ListView详解
查看>>
Looking for APAC Operations IT XML Database Developer in Shenzhen and Hongkong
查看>>
Myeclipse常用快捷键
查看>>
我的友情链接
查看>>
Unity3d多线程
查看>>
炉石传说 C# 开发笔记 (源代码整理公开)
查看>>
前端文摘:Web 开发模式演变历史和趋势
查看>>
最大子数组和问题的解
查看>>
cout设置输出数据不显示科学计数法
查看>>
zoj 1659 Mobile Phone Coverage(矩形面积并)
查看>>
python学习 day3
查看>>
Centos 6.4下用Squid配置反向代理多个内网WEB服务器
查看>>