CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

搞定含内外描边及阴影的input按钮

发布时间:『 2016-09-30 22:13』  博客类别:WEB前端  阅读(977) 评论(0)

最近偶然间看到一个同事写的一个按钮了,因为一个边的浅色内描边所以,用了两个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的世界也是五彩缤纷滴,林子大了,什么漂亮的鸟都有,找找看,或许会有意想不到的鸟儿哦~


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   html语义化标签     漂亮的input按钮     box-shadow     css3  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有