今天看到一句我最喜欢的名言，和大家分享一下。
周恩来说：世界上最聪明的人是最老实的人，因为只有老实人才能经得事实和历史的考验。
下面再和大家分享一下今天的CSS3例子，一个最有立体感的苹果笔记本电脑。
在学习CSS3时，一定要自己敲代码。不要抄。这样才能慢慢学会CSS3知识。
<div class="macbook">
<div class="screen"></div>
<div class="base"></div>
</div>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(black, gray, silver, gray, black);
}
.macbook {
font-size: 10px;
width: 50em;
display: flex;
flex-direction: column;
align-items: center;
}
.screen {
width: 40em;
height: calc(40em*0.667);
box-sizing: border-box;
border: black solid;
border-width: 1.8em 1.3em 1.7em 1.3rem;
border-radius: 3% 3% 0 0 / 5%;
box-shadow: 0 0 0 0.1em silver;
background: radial-gradient( circle at right bottom, rgba(255, 255, 255, 0.4) 33em, rgba(255, 255, 255, 0.6) 33em), black;
}
.base {
width: inherit;
height: 1.75em;
/*border:2px solid yellow;*/
--bottom: linear-gradient( white 55%, #999 60%, #222 90%, rgba(0, 0, 0, 0.1) 100%);
border-radius: 0 0 10% 10% / 0 0 50% 50%;
--top: linear-gradient( to right, hsla(0, 0%, 0%, 0.5) 0%, hsla(100, 100%, 100%, 0.8) 1%, hsla(0, 0%, 0%, 0.4) 4%, transparent 15%, hsla(100, 100%, 100%, 0.8) 50%, transparent 85%, hsla(0, 0%, 0%, 0.4) 96%, hsla(100, 100%, 100%, 0.8) 99%, hsla(0, 0%, 0%, 0.5) 100%) no-repeat top/100% 55%;
background: var(--top), var(--bottom);
}
.base::before {
content: '';
position: absolute;
width: 7em;
height: 0.7em;
/*border:2px solid dodgerblue;*/
border-radius: 0 0 7% 7% / 0 0 95% 95%;
left: calc(50% - 7em/2);
box-shadow: inset -0.5em -0.1em 0.3em rgba(0, 0, 0, 0.2), inset 0.5em 0.1em 0.3em rgba(0, 0, 0, 0.2);
background-color: #ddd;
}
再来一个我写的综合例子，一个带键盘的苹果笔记本电脑
<div class="macbook">
<div class="screen">
<div class="s_txt">MacBook Pro</div>
</div>
<div class="kbd">
<div class="stoma"></div>
<div class="keys">
<ul class="row row1">
<li class="esc">esc</li>
</ul>
<ul class="row row2">
<li>~</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
<li>-</li>
<li>=</li>
<li class="delete">×</li>
</ul>
<ul class="row row2">
<li>→|</li>
<li>Q</li>
<li>W</li>
<li>E</li>
<li>R</li>
<li>T</li>
<li>Y</li>
<li>U</li>
<li>I</li>
<li>O</li>
<li>P</li>
<li>[</li>
<li>]</li>
<li>\</li>
</ul>
<ul class="row row2">
<li class="back">中/英</li>
<li>A</li>
<li>S</li>
<li>D</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>;</li>
<li>'</li>
<li class="back">↩︎</li>
</ul>
<ul class="row row2">
<li class="shift">⇧</li>
<li>Z</li>
<li>X</li>
<li>C</li>
<li>V</li>
<li>B</li>
<li>N</li>
<li>M</li>
<li>,</li>
<li>。</li>
<li>/</li>
<li class="shift">⇧</li>
</ul>
<ul class="row row2">
<li>fn</li>
<li>^</li>
<li>⌥</li>
<li>⌘</li>
<li class="space"></li>
<li>⌘</li>
<li>⌥</li>
<li>◀</li>
<li class="arw"></li>
<li>►</li>
</ul>
</div>
<div class="stoma"></div>
<div class="base"></div>
</div>
</div>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(black, gray, silver, gray, black);
}
ul,li{list-style: none;}
.macbook {
font-size: 10px;
width: 50em;
display: flex;
flex-direction: column;
align-items: center;
}
.macbook *::before,
.macbook *::after{
content:'';
position: absolute;
}
.screen{
width: 40em;
height: calc(45em*0.667);
box-sizing: border-box;
border: black solid;
border-width: 1.8em 1.3em 1.7em 1.3rem;
border-radius: 3% 3% 0 0 / 5%;
box-shadow: 0 0 0 0.1em silver;
transform: rotatex(-45deg);
background: radial-gradient( circle at right bottom, rgba(255, 255, 255, 0.4) 33em, rgba(255, 255, 255, 0.6) 33em), black;
}
.screen::before{
margin: -13px auto;
width: 5px;
height: 5px;
border-radius: 50%;
background: #00E676;
animation: webcam 1000ms linear 800ms infinite;
left: calc(50% - 5px/2);
}
.screen::after{
left: 0;
right: 0;
margin:0 auto;
bottom: -48px;
left: -23px;
width: 30rem;
height: 36px;
background: #111;
border-radius: 0 0 12px 12px;
border-left: 2px solid silver;
border-right: 2px solid silver;
border-bottom: 2px solid silver;
}
.s_txt{
position: absolute;
left: 0;
right: 0;
margin:0 auto;
position: absolute;
font-size: 14px;
color: #999;
bottom: -32px;
left: 42%;
z-index: 99;
}
@keyframes webcam{
0%,10%,31%,60%,100% {
background: #a6a6a6;
}
11%,30%,61%,99% {
background: #00E676;
}
}
.kbd{
display: flex;
flex-direction: row;
z-index: 1;
padding: 30px 5px 0em 5px;
margin-top: -36px;
width: 460px;
height: 295px;
background: silver;
border-radius: 16px;
position: relative;
justify-content: center;
box-shadow: 0 0 3px rgba(255, 255, 255, 0.5) inset
}
.kbd::before{
top: 0;
left: 0;
right: 0;
margin:0 auto;
width: 340px;
height: 9px;
background: #222;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.7) inset;
}
.kbd::after{
left: 0;
right: 0;
margin:0 auto;
bottom: 10px;
border-radius: 6px;
border: 1px solid #999;
width: 15em;
height: 7.5em;
background: silver;
}
.stoma{
margin-top: 6px;
width: 22px;
height: 158px;
background: radial-gradient(#555 26%, transparent 0);
background-size: 3px 3px;
}
.keys{
display: flex;
flex-direction: column;
margin: 0 5px 0 5px;
width: 400px;
height: 184px;
box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.row{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 7px 5px 0 5px;
border-radius: 3px;
width: 380px;
margin:0 auto;
}
.row1{background-color: #232323;margin-top:5px;padding-top: 3px;}
.row2{padding:7px 3px 0 3px;width:390px;}
.row li{
color: white;
background: #111;
border-radius: 2px;
box-shadow: 0 0 0 1px black;
height: 22px;
width: 22px;
font-size: 7px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-family: sans-serif;
}
.row1 li{
background:#525358;
color:#dddee2;
border-radius: 2.25px;
padding:0 3px;
margin-bottom:3px;
}
.row2 li.delete,.row2 li.contrl{
width:36px;
}
.row2 li.back{
width: 40px;
}
.row2 li.shift{
width: 50px;
}
.row2 li.space{
width: 140px;
}
.row2 li.arw::before{
content:'▴';
width:22px;
text-align: center;
display: block;
padding-bottom: 10px;
}
.row2 li.arw::after{
content:'▾';
width:22px;
text-align: center;
display: block;
padding-top: 10px;
}
.base{
width: 7em;
height: 0.3em;
border-radius: 7% 7% 0 0 / 95% 95% 0 0;
left: calc(50% - 7em/2);
background-color: #000;
position: absolute;
bottom:0;
}
