自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服~怎么办,自己打发时间呗,闲来无事看看别人的技术博客,趁这段时间长长自己的见识,充充电;可实在不想看了、烦了,怎么办?偶然间看到一个同事写的一个按钮了,因为一个边的浅色内描边所以,用了两个div写了一个按钮;之前的处理都是直接把那1px的描边直接忽略,或者找设计重新调整,因为感觉一个按钮用两个标签有点浪费。费话不多说,先上按钮图片:

这个是效果图,看到上面的那个细微的浅色内描边了么?

同事的实现方法是这样的,HTML代码如下:

<div class="outBtn">
<div class="innerBtn">测试按钮</div>
</div>

CSS代码如下:

.outBtn{border: 1px solid #f47a0e;border-radius:2px;-webkit-border-radius: 2px;height: 38px;box-shadow:0 1px 3px #bebdbd;-webkit-box-shadow: 0 1px 3px #bebdbd;}
.innerBtn{border-top: 1px solid #ffa033;background: #ff8700;text-align: center;height: 37px;line-height: 37px;color: #fff;}

上实现效果:

只是一个按钮而已,我总觉得写这么多代码有浪费,而且都没有用input标签,也就是说HTML代码没有语义化。

所以我就在想怎么样能直接用一个input标签把它实现了呢;正好昨天刚看了张鑫旭同学的一个篇文章叫《CSS3 box-shadow盒阴影图形生成技术》,有兴趣的朋友可以看看,张鑫旭的文章写的倍儿有意思。言归正转啊,这篇文章中提到了像素的叠加,于是我就想利用阴影的叠加是不是可以只用一个input标签把这个效果实现了。

开始我想用border写上边那一条浅色的线,外边框用box-shadow实现,再叠加上下面的灰色阴影,结果不甚理想。

换个思路,边框还用border实现,里面那条浅色线及下面的灰色阴影用box-shadow叠加,于是就出现的我想要效果,看下效果,有没有什么出入:

效果还不错吧~~

上代码:

<input type="button" value="演示按钮" class="btn"  />
<style>
.btn{width:200px;display:block;height:38px;line-height;38px;text-align:center;background:#FF8700;border:1px solid #f47a0e;-webkit-border-radius: 2px;outline:none;color:#fff;box-shadow:0 1px #ffa033 inset, 0px 1px 3px #bebdbd;}
</style>

这个CSS的世界也是五彩缤纷滴,林子大了,什么漂亮的鸟都有,找找看,或许会有意想不到的鸟儿哦~

一个input标签搞定含内外描边及阴影的按钮~的更多相关文章

  1. 转:C4项目中验证用户登录一个特性就搞定

    转:C4项目中验证用户登录一个特性就搞定   在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性.     // 摘要:    //     表示一个特性,该特性用于限制调用 ...

  2. 企业sudo权限规划详解 (实测一个堆命令搞定)

    简述问题:         随着公司的服务器越来越多,人员流动性也开始与日俱增,以往管理服务器的陈旧思想应当摒弃,公司需要有 更好更完善的权限体系,经过多轮沟通和协商,公司一致决定重新整理规划权限体系 ...

  3. 一个PHP文件搞定微信H5支付

     / 更新于 2018-07-02 / 8 条评论 过年期间也坚持要撸码啊接着给博客除草,在这个小除夕是情人节的一天,祝大家新年快乐,情人节能够顺利脱单~~~ 回归正题,这篇文章介绍一下微信H5支付, ...

  4. 我和小美的撸码日记(3)之中的一个句话搞定MVC表单页数据绑定与提交

    另外献上在<线体验Demo地址>希望大家也能从中得到一些启示. 地址:http://121.40.148.178:8080/ . username:guest,password:12345 ...

  5. Linux服务器其中一个磁盘满了怎么办?在不做磁盘扩容的情况下,一个软连接就搞定。

    适用环境要求:Linux系统及服务器.有管理员权限.存在多余空间的磁盘例如下图中"/home"在磁盘sda5中与"/"不属于同一块磁盘: 1.首先转移正在使用的 ...

  6. 全能无线渗透测试工具,一个LAZY就搞定了

    近来一直在研究无线安全方面的东西,特别是在无线渗透测试这块,每次渗透测试时总要来回不停的切换操作和挑选利器,很是麻烦.就想看看是否可以有一款功能全面的集合型工具. 正所谓功夫不负有心人,还真有这么一个 ...

  7. PHP导出Excel一个方法轻松搞定

    /** * 导出数据为excel表格 *@param $data 一个二维数组,结构如同从数据库查出来的数组 *@param $title excel的第一行标题,一个数组,如果为空则没有标题 *@p ...

  8. MVC4项目中验证用户登录一个特性就搞定

    在开发过程中,需要用户登陆才能访问指定的页面这种功能,微软已经提供了这个特性. // 摘要: // 表示一个特性,该特性用于限制调用方对操作方法的访问. [AttributeUsage(Attribu ...

  9. 微信小程序:一起玩连线,一个算法来搞定

    微信小程序:一起玩连线 游戏玩法 将相同颜色的结点连接在一起,连线之间不能交叉. 算法思想 转换为多个源点到达对应终点的路径问题,且路径之间不相交.按照dfs方式寻找两个结点路径,一条路径探索完之后, ...

随机推荐

  1. 如何让Notepad++添加Python运行方式.精讲

    原文来自金石开的文章,欲知详情请点击他昵称. 名为cncyber的博友,在此感谢他. 全部省略.正确命令是在原文的回复里,在此复制贴上: cmd /k cd /d "$(CURRENT_DI ...

  2. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED解决方法

    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@    WARNING: REMOTE HOST IDENTIFICATION ...

  3. c#线程之异步委托begininvoke、invoke、AsyncWaitHandle.WaitOne 、异步回调

    单靠自己看书学总是会走很多弯路,任何人也不列外,有些时候自己遇到的很多问题,其它别人在很久之前也可能遇到过,上网查查可以走很大捷径,对自己的学习有很大帮助,刚开始弄线程这块,一开始只是看书,很多东西都 ...

  4. [2014.01.27]wfChart 统计图组件 5.6

    本组件支持多种样式图表,包括柱型图.横柱型图.曲线图.饼图.点图.区域图.     可选择的8大主题风格,且主题可再配置,在加快开发的同时又提供更好的图像效果.     组件图表提供两种输出接口,包括 ...

  5. iis WebSocket 搭建环境及配置

    http://www.86y.org/art_detail.aspx?id=816       WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例如Chrome,S ...

  6. 使用nvm安装node

    安装nvm curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash 安装node nvm ...

  7. python---filecmp

    ilecmp可以实现文件,目录,遍历子目录的差异对比功能. 自带filecmp模块,无需安装. 常用方法说明 filecmp提供3个操作方法,cmp(单文件对比),cmpfile(多文件对比),dir ...

  8. SqlBulkCopy

    private static void DataTableToSQLServer( DataTable dt) { string connectionString = GetConnectionStr ...

  9. java 命令notes

    jps:查看本机的Java中进程信息. jstack:打印线程的栈信息,制作线程Dump. jmap:打印内存映射,制作堆Dump. jstat:性能监控工具. jhat:内存分析工具. jconso ...

  10. CGI

    CGI的工作原理一般是这么定义的: 客户端web浏览器浏览某个主页后,利用一定的方式提交数据,并通过HTTP协议向Web服务器发出请求,服务器端的HTTP Daemon(守护进程)将描述的主页信息通过 ...