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 }
