css布局实现imac 2021新款电脑效果代码-html代码-BFW代码库

css布局实现imac 2021新款电脑效果代码

代码语言：html

代码描述：css布局实现imac 2021新款电脑效果代码

代码标签： imac 2021 新款电脑效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
.imac {
  --body-width: 50vw;
  --body-border-radius: calc(var(--body-width) * 0.016);
  --bezel-width: calc(var(--body-width) * 0.025);
  --display-height: calc(var(--body-width) * 0.538);
  --front-panel-height: calc(var(--body-width) * 0.125);
  --stand-height: calc(var(--body-width) * 0.1554);
  --stand-width: calc(var(--body-width) * 0.2372);
  --color: #d5d6d8;  
  display: grid;
  grid: var(--bezel-width) 
        var(--display-height) 
        var(--front-panel-height)
        var(--stand-height) 
        / var(--bezel-width) 1fr var(--stand-width) 1fr var(--bezel-width);
  width: var(--body-width);
}

.imac > * {
  background: #fff;
  border-radius: calc(var(--body-width) * 0.002);
  border: calc(var(--body-width) * 0.001) solid #333;
  grid-area: 2 / 2 / 3 / 5;
  place-self: stretch;
}

.imac::before {
  background: 
    radial-gradient(circle,
      #333 calc(100% - 1px), 
      transparent calc(100% - 0.5px)
    ),
    linear-gradient(to bottom, 
      #eeeef0 85.25%, 
      var(--color) 85.25%
    );
  background-repeat: no-repeat;
  background-position: top var(--bezel-width) center, top;
  background-size: 94.8% 78%, 100%;
  border-radius: var(--body-border-radius);
  box-shadow: 0 0 1px rgba(0 0 0 / 0.2);
  content: "";
  grid-area: 1 / 1 / 4 / 6;
}

.imac::after {
  background:
    linear-gradient(to bottom, 
      rgba(0 0 0 / 0.125),
      rgba(0 0 0 / 0.05) 55%,
      rgba(0 0 0 / 0.05) 75%,
      rgba(0 0 0 / 0.075) 92%,
      rgba(255 255 255 / 0.3) 96%,
      rgba(0 0 0 / 0.35) 99%
    ),
    linear-gradient(to right, 
      rgba(255 255 255 / 0.2),
      rgba(0 0 0 / 0.35) 1%,
      rgba(255 2.........完整代码请登录后点击上方下载按钮下载查看