<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>MAC</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 1580px;
width: 100%;
height: 100%;
text-align: center;
background-color: #282828;
background-image:
-webkit-radial-gradient(black 15%, transparent 16%),
-webkit-radial-gradient(black 15%, transparent 16%),
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%),
-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
background-image:
radial-gradient(black 15%, transparent 16%),
radial-gradient(black 15%, transparent 16%),
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%),
radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;
background-size: 16px 16px;
}
.board{
display: inline-block;
width: 600px;
height: 450px;
position: relative;
background: rgba(250,250,250,1);
background-image: linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
background-image: -webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
box-shadow: 0px 3px 3px rgba(0,0,0,0.9);
border:1px solid #ccc;
border-radius: 20px;
margin: 80px auto;
}
.board:before{
content: '';
width: 735px;
height: 20px;
position: absolute;
top:-20px;
left: -66.5px;
background: rgb(210,210,210);
border-radius: 0px 0px 3px 3px;
border-top-left-radius: 390px 18px;
border-top-right-radius: 390px 18px;
border-bottom: 2px solid rgba(0,0,0,0.9);
background:-webkit-linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
background:linear-gradient(top,rgb(210,210,210) 50%,rgb(255,255,255));
box-shadow: inset 0px 5px 3px rgb(160,160,160);
}
.board:after{
content: '';
position: absolute;
display: block;
width: 96px;
height: 5px;
bottom:0;
left: 252px;
background: rgb(210,210,210);
border-top-left-radius: 96px 40px;
border-top-right-radius: 96px 40px;
background:-webkit-linear-gradient(top,#c1c0c6 90%,#fff 95%,#747474);
background:linear-gradient(top,#c1c0c6 90%,#fff 95%,#747474);
box-shadow: inset 0px 5px 3px rgb(160,160,160);
}
.blackbar{
margin-top: 2px;
width: 450px;
height: 18px;
left: 75px;
position: absolute;
border-radius: 2px;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
background: -webkit-linear-gradient(to bottom,#161719 ,#151517 20%,#000 15%,#161719);
background: linear-gradient(to bottom,#161719 ,#151517 20%,#000 15%,#161719);
}
.keyboard{
position: absolute;
width:537px;
height: 216px;
left: 31.5px;
top: 35px;
border: 1px solid rgb(180,180,180);
border-radius: 8px;
background:-webkit-linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
background:linear-gradient(60deg,rgba(250,250,250,1) 25%,rgba(210,210,210,1));
box-shadow:-2px 0px 2px rgb(180,180,180) inset,
0px -3px 3px rgb(180,180,180) inset,
2px 0px 2px rgb(180,180,180) inset,
0px 2px 2px #fff inset;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-sele
基于CSS3的苹果套件
最新推荐文章于 2023-02-20 09:09:41 发布
这篇博客展示了一个完全使用CSS3编写的苹果套件模拟,包括Mac电脑、键盘、触摸板和iPhone。通过复杂的CSS样式和渐变,实现了逼真的视觉效果,如背景纹理、阴影和边框。
摘要由CSDN通过智能技术生成