css3开发系列----画控件凸起效果

效果图:

 

实现关键: 普通DIV+css3的box-shadow属性

相关代码:

box-shadow: 1px 1px 1px rgba(0, 0, 0, .29),1px 1px 1px
		rgba(255, 255, 255, .44)  inset;

(chrome,safari加上-webkit前缀,firefox加上-moz前缀,opera加上-o前缀)

box-shadow使用解释:

 

 

开发步骤:

1.首先定义一个div

1 <div>
2    <div></div>
3    <div></div>
4 </div>

2.定义css样式

 1             body {
 2                 background-color: rgb(173,173,173);
 3 }
 4             body > div:first-child {
 5                 background-color: rgb(210, 210, 210);
 6                 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .29), inset 1px 1px 1px rgba(255, 255, 255, .44);
 7                 display: -webkit-box;
 8 }
 9             body > div:first-child > div {
10                 margin:10px;
11                 color: rgb(58, 164, 220);
12                 text-align: center;
13                 -webkit-box-sizing: border-box;
14                 -webkit-box-flex: 1;
15                 -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .29), inset 1px 1px 1px rgba(255, 255, 255, .44);
16 }
17             body >div:first-child>div:first-child{
18                 background: white;
19 }

 

转载于:https://www.cnblogs.com/jkernono/archive/2012/03/02/2377017.html