css打造Mac Air

发表于 | 分类于 | 阅读次数:

期待的效果：

Paste_Image.png

####第0步

  1. box-shadow:0 5px 6px rgb(160,160,160);
    基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
    对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

    最后从div的左下角到右上角以60度添加一个线性渐变linear-gradient，是从白色开始从四分之一出过渡到灰色。

  2. linear-gradient css渐变

####第1步

1
2
3
4
5
6
7
8
9
10
11
12
.board{
    background: rgb(210,210,210);
    width:600px;
    height:450px;
    margin:0 auto;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    box-shadow: 0px 5px 6px rgb(160,160,160);
//线性渐变
    background: -webkit-linear-gradient(60deg,rgba(250,250,250,1)25%,rgba(210,210,210,1)); 
}

此时，面板已经打造完成，效果呢，就像下面这个样子，忽略那些字符吧

Paste_Image.png

####第2步 盖子
.board:before{ }
伪元素 要设置display属性，才可以确定它的样式，并显示出来

Paste_Image.png

border-top-left-radius：border-bottom-right-radius: length|% [length|%];
注释：border-top-left-radius 属性的长度值和百分比值定义四分之一椭圆（定义外部边框边缘的边角形状）的半径（radii）。第一个值是水平半径，第二个值是垂直半径

1
2
3
4
rgb(30,60,100,180,210)各自的颜色趋向
box-sizing
box-shadow
background: -webkit-linear-gradient(top,rgb(30,30,30),rgb(60,60,60)35%,rgb(100,100,100)50%,rgb(30,30,30)65%);

当啷，键盘区画好啦
Paste_Image.png
我们用box-shadow给keyboard的四条边框添加四条内部inset阴影，关于box-shadow以后有机会再讲，先把实现和效果贴上：

五、第五步

http://mp.weixin.qq.com/s/K33g-rlU0_AVMQADyPN-Aw