English (US) 
Español (ES) 
Português (PT) 
Français (CA) 
Español (MX) 
Español (VE) 
Español (CO) 
Español (AR) 
Português (BR) 
Quechua (PE) 
Guaraní (PY) 
简体中文 (ZH) 
繁體中文 (HK) 
日本語 (JP) 
한국어 (KR) 
हिन्दी (HI) 
Pilipino (PH) 
ไทย (TH) 
Tiếng Việt (VN) 
Bahasa Melayu (MY) 
Bahasa Indonesia (ID) 
বাংলা (BD) 
اردو (PK) 
සිංහල (LK) 
ភាសាខ្មែរ (KH) 
English (UK) 
Français (FR) 
Deutsch (DE) 
Italiano (IT) 
Русский (RU) 
Nederlands (NL) 
Türkçe (TR) 
Polski (PL) 
Svenska (SE) 
Norsk (NO) 
Dansk (DK) 
Suomi (FI) 
Ελληνικά (GR) 
Čeština (CZ) 
Magyar (HU) 
Română (RO) 
Български (BG) 
Српски (RS) 
Українська (UA) 
CSS 绘制 Apple 标志
由 
Deepseek提供支持
Deepseek提供支持
广告
HTML:
<body class="bacc-black">
<div class="apple-container pos-r m-hoz-auto">
<div class="apple-leaf pos-a m-hoz-auto bacc-white"></div>
<div class="apple-body-top pos-r m-hoz-auto">
<div class="apple-body-top-left oh pos-r pull-left">
<div class="apple-body-top-left-inside bacc-white"></div>
</div>
<div class="apple-body-top-right oh pos-r pull-left">
<div class="apple-body-top-right-inside bacc-white"></div>
</div>
<div class="apple-body-top-center oh pos-a pull-left">
<div class="apple-body-top-center-inside bacc-black"></div>
</div>
</div>
<div class="apple-body pos-r oh m-hoz-auto">
<div class="apple-body-inside pull-left bacc-white"></div>
<div class="apple-ate pos-a pull-left bacc-black"></div>
</div>
<div class="apple-body-bottom pos-r m-hoz-auto">
<div class="apple-body-bottom-left oh pos-r pull-left">
<div class="apple-body-bottom-left-inside bacc-white"></div>
</div>
<div class="apple-body-bottom-right oh pos-r pull-left">
<div class="apple-body-bottom-right-inside bacc-white"></div>
</div>
<div class="apple-body-bottom-center oh pos-a pull-left">
<div class="apple-body-bottom-center-inside bacc-black"></div>
</div>
</div>
</div>
</body>CSS:
/*位置选择器*/
.clearfix {
clear: both;
}
.pos-a {
position: absolute;
}
.pos-r {
position: relative;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.m-hoz-auto {
margin-left: auto;
margin-right: auto;
}
.left-32 {
left: 32px;
}
.left-5 {
left: 5px;
}
.top-30 {
top: 30px;
}
/*形状选择器*/
.circle {
border-radius: 50%;
}
/*样式选择器*/
.bacc-white {
background-color: white;
}
.bacc-black {
background-color: black;
}
.bacc-blue {
background-color: rgb(2, 159, 227);
}
.bacc-brown-red {
background-color: rgb(216, 5, 23);
}
.bacc-mouse-red {
background-color: #E80115;
}
.bacc-mouse-orange {
background-color: #EF6C1C;
}
.bacc-bell-yellow {
background-color: #F5D600;
}
.border-black-1 {
border: 1px solid black;
}
.border-black-2 {
border: 2px solid black;
}
.border-black-3 {
border: 3px solid black;
}
.oh {
overflow: hidden;
}
.apple-container {
height: 600px;
margin-top: 100px;
margin-bottom: 100px;
width: 600px;
}
.apple-leaf {
border-top-left-radius: 100%;
border-bottom-right-radius: 100%;
height: 55px;
left: 49%;
top: -43px;
width: 45px;
z-index: 6;
}
.apple-body-top {
height: 15px;
width: 130px;
}
.apple-body-top-left {
height: 15px;
width: 65px;
z-index: 4;
}
.apple-body-top-left-inside {
border-radius: 50%;
height: 75px;
margin-top: 8px;
margin-left: -17px;
width: 82px;
}
.apple-body-top-right {
height: 15px;
width: 65px;
z-index: 4;
}
.apple-body-top-right-inside {
border-radius: 50%;
height: 75px;
margin-top: 8px;
margin-left: 1px;
width: 82px;
}
.apple-body-top-center {
height: 15px;
left: 20px;
top: 4px;
width: 85px;
z-index: 5;
}
.apple-body-top-center-inside {
border-radius: 50%;
height: 95px;
margin-left: 1px;
margin-top: -80px;
width: 87px;
z-index: 5;
}
.apple-body {
height: 150px;
width: 200px;
z-index: 3;
}
.apple-body-inside {
border-top-left-radius: 60px 70px;
border-top-right-radius: 60px 70px;
border-bottom-left-radius: 100px 115px;
border-bottom-right-radius: 100px 115px;
height: 175px;
margin-top: -5px;
width: 200px;
z-index: 3;
}
.apple-ate {
border-radius: 50%;
height: 95px;
margin-left: 160px;
margin-top: 8px;
width: 95px;
}
.apple-body-bottom {
height: 15px;
width: 130px;
}
.apple-body-bottom-left {
height: 15px;
width: 65px;
z-index: 4;
}
.apple-body-bottom-left-inside {
border-radius: 50%;
height: 75px;
margin-top: -66px;
margin-left: -7px;
width: 70px;
}
.apple-body-bottom-right {
height: 15px;
width: 65px;
z-index: 4;
}
.apple-body-bottom-right-inside {
border-radius: 50%;
height: 75px;
margin-top: -66px;
margin-left: 2px;
width: 70px;
}
.apple-body-bottom-center {
height: 15px;
left: 28px;
top: -3px;
width: 70px;
z-index: 5;
}
.apple-body-bottom-center-inside {
border-radius: 50%;
height: 95px;
margin-left: -6px;
width: 87px;
}在线实例：
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ，欢迎您的访问!
文章链接：https://www.lilianhua.com/draw-apple-logo-with-css.html
文章链接：https://www.lilianhua.com/draw-apple-logo-with-css.html
请先登录才能参与答题
