css制作goole

使用CSS制作Google风格按钮

Google风格的按钮通常具有简洁、扁平化的设计，带有圆角边框和轻微的阴影效果。以下是实现这种风格的CSS代码示例：

.google-button {
  background-color: #4285F4;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 24px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.google-button:hover {
  background-color: #3367D6;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
}

.google-button:active {
  background-color: #2F5BB7;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
}

创建Google风格的搜索框

Google搜索框的特点是简洁的白色背景、圆角边框和轻微的阴影效果：

.google-search {
  width: 584px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #dfe1e5;
  border-radius: 24px;
  font-size: 16px;
  box-shadow: 0 1px 6px rgba(32,33,36,0.28);
  outline: none;
}

.google-search:focus {
  box-shadow: 0 2px 8px rgba(32,33,36,0.3);
}

实现Google Material Design卡片效果

Google的Material Design卡片具有明显的阴影和圆角：

.material-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12), 
              0 4px 12px rgba(0,0,0,0.12);
  padding: 16px;
  transition: box-shadow 0.3s;
}

.material-card:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.16), 
              0 6px 16px rgba(0,0,0,0.16);
}

使用Google配色方案

Google的品牌颜色可以作为CSS变量使用：

:root {
  --google-blue: #4285F4;
  --google-red: #EA4335;
  --google-yellow: #FBBC05;
  --google-green: #34A853;
  --google-gray: #5F6368;
}

.google-header {
  color: var(--google-gray);
  font-family: 'Product Sans', Arial, sans-serif;
}

添加Google图标字体

要获得Google产品的官方外观，可以使用Material Icons：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

然后在CSS中使用：

.icon-button {
  font-family: 'Material Icons';
  font-size: 24px;
}