木木木木木

[CSS3] 搜索输入框

盒阴影 box-shadow：

正常情况下是inset内阴影，聚焦时就改变成外阴影。看CSS代码：

#s{-webkit-box-shadow:inset 1px 1px 2px #aaa;-moz-box-shadow:inset 1px 1px 2px #aaa;box-shadow:inset 1px 1px 2px #aaa;}
 
#s:focus{-webkit-box-shadow:#aaa 0px 0px 8px;-moz-box-shadow:#aaa 0px 0px 8px;box-shadow:#aaa 0px 0px 8px;outline:none;}

当然，还可以适当添加一点点圆角 border-radius：

#s{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

好了，内容就是这些，具体属性各值是什么含义怎么调整请童鞋们问搜索大神～

——————割——————得——————好——————爽——————

一欠扁之人被扁后说：感谢你们，我非常喜欢被痛扁的感觉，我会继续欠扁到底的！

小闇
十一月 9, 2010 20:39:20 #1

SF

回复
- winy
  十一月 9, 2010 20:45:20
  
  沙发挤你没意思
  
  回复
  - 小闇
    十一月 9, 2010 20:46:20
    
    取消了郵件推送的表示淡定
    
    回复
winy
十一月 9, 2010 20:40:20 #2

板凳

回复
- 小闇
  十一月 9, 2010 20:42:20
  
  擠板凳
  
  回复
  - winy
    十一月 9, 2010 20:45:20
    
    又慢了几秒
    
    回复
    - 小闇
      十一月 9, 2010 20:46:20
      
      我功力回來了啦～
      
      回复
小闇
十一月 9, 2010 20:40:20 #3

那淫是抖M不解釋

回复
Boss方
十一月 9, 2010 20:40:20 #4

回复
Boss方
十一月 9, 2010 20:41:20 #5

回复
小闇
十一月 9, 2010 20:42:20 #6

這個搜索框……非常不錯！
折騰辛苦了～

回复
- 林木木
  十一月 10, 2010 09:36:9
  
  看了一些CSS3教程折腾的～HOHO
  
  回复
浩子
十一月 9, 2010 20:46:20 #7

呵呵
来踩踩了……

回复
zrqx008
十一月 9, 2010 20:48:20 #8

你妹的，picasa的图片要多刷新几次才出来。

回复
- 林木木
  十一月 10, 2010 09:37:9
  
  怪各地网络……
  
  回复
小松
十一月 9, 2010 21:09:21 #9

css3好东西呀，神器~

回复
- 林木木
  十一月 10, 2010 09:38:9
  
  等html5真正来了，那绝对更加牛X了～
  
  回复
万戈
十一月 9, 2010 21:59:21 #10

CSS3，我喜欢，用的好很帅的，就像木木

回复
- 林木木
  十一月 10, 2010 09:38:9
  
  HOHOHO，偷笑中～
  
  回复
SErHo
十一月 9, 2010 22:06:22 #11

发现使用CSS3的基本上就是阴影或者来个圆角。

回复
- 林木木
  十一月 10, 2010 09:39:9
  
  还有放大图片，旋转，还有很多很多～只不过这2个属性最好用了～
  
  回复
huangjun
十一月 9, 2010 22:19:22 #12

外阴影是好看啊~

回复
小托
十一月 9, 2010 22:22:22 #13

哈哈。、、是很好看的说- –

回复
Louis Han
十一月 9, 2010 22:57:22 #14

不错酷酷的感觉

回复
mice
十一月 9, 2010 22:59:22 #15

chrome下看你主题真帅…

回复
- 小闇
  十一月 9, 2010 23:01:23
  
  用Firefox看更漂亮~
  
  回复
  - mice
    十一月 9, 2010 23:09:23
    
    原来看过木有在chrome下看的舒服=.=…个人认为
    
    回复
- 林木木
  十一月 10, 2010 09:40:9
  
  因为是在chrome下调试的～
  
  回复
ADD~``
十一月 9, 2010 23:06:23 #16

css3 效果华丽丽的～

回复
QiQiBoY
十一月 9, 2010 23:14:23 #17

新加的头图不错。。

回复
- 林木木
  十一月 10, 2010 09:41:9
  
  Gmail里偷来的～
  
  回复
snowxh
十一月 9, 2010 23:17:23 #18

背景不错哦

回复
blueandhack
十一月 9, 2010 23:44:23 #19

不错的……我以为图片是效果~~点了点……

回复
- 林木木
  十一月 10, 2010 09:42:9
  
  恩哈～看来够逼真～
  
  回复
一米
十一月 10, 2010 08:12:8 #20

喜欢，可是你不给演示。

回复
- 林木木
  十一月 10, 2010 09:43:9
  
  头部搜索框撒～
  
  回复
古墓候梅
十一月 10, 2010 09:08:9 #21

搜搜更健康！！

回复
园子
十一月 10, 2010 09:19:9 #22

使用 CSS3 做出的这种阴影效果不错。

回复
一米
十一月 10, 2010 10:13:10 #23

我用的是订阅，嘿嘿

回复
囧啊囧
十一月 10, 2010 10:16:10 #24

看上去很爽

回复
- 林木木
  十一月 10, 2010 12:18:12
  
  有事儿没事儿多点几下咯～
  
  回复
小邪
十一月 10, 2010 10:39:10 #25

一起来无视IE6，(￣y▽￣)╭ Ohohoho…..

回复
小邪
十一月 10, 2010 10:39:10 #26

不过话说这个聚焦之后变外阴影的效果简直太sexy了。。

回复
- 林木木
  十一月 10, 2010 12:19:12
  
  有点那么意思～
  
  回复
软件盒子
十一月 10, 2010 11:03:11 #27

第一个好看

回复
- 林木木
  十一月 10, 2010 12:19:12
  
  内阴影也很舒服的～
  
  回复
wmtimes
十一月 10, 2010 12:00:12 #28

不错啊。我顶部的登录框也已经换成css3的了。

回复
飞一般的蜗牛
十一月 10, 2010 13:20:13 #29

那啥，图片不能显示了。。

回复
枫雪
十一月 10, 2010 14:36:14 #30

高科技，跟进…学习

回复
流年
十一月 10, 2010 19:12:19 #31

哈哈，文囧啦

回复
Glow
十一月 10, 2010 20:53:20 #32

都上CSS3了啊，佩服木木的学习能力。

回复
- 林木木
  十一月 10, 2010 23:17:23
  
  CSS3还是很给力地～嘻嘻
  
  回复
等待思索
十一月 11, 2010 13:03:13 #33

学习了，，

回复
家里购
十一月 11, 2010 19:54:19 #34

IE下不行

回复
zwwooooo
十一月 16, 2010 01:21:1 #35

css3还是不能用的太多

回复
梧桐
十二月 3, 2010 19:46:19 #36

box-shodow用多了感觉会卡..尤其是firefox

回复
- 林木木
  十二月 3, 2010 19:56:19
  
  ff还是不够给力哟！
  
  回复
梧桐
十二月 8, 2010 16:26:16 #37

是啊，感觉Gecko真的已经比Webkit落后很多了，而且无论是Gecko还是Webkit都不愿意率先支持CCS3标准，搞的一大堆-moz-webkit的私有标签来抢市场，真的佷。。。

回复
- 林木木
  十二月 8, 2010 18:51:18
  
  CSS3没个5年是不可能流行的……
  
  回复

发表评论 取消回复

发表评论取消回复