自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个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的世界也是五彩缤纷滴,林子大了,什么漂亮的鸟都有,找找看,或许会有意想不到的鸟儿哦~

posted on 2014-11-01 11:02  口口一凡  阅读(10036)  评论(1编辑  收藏  举报