运用CSS盒子模型的边框属性，背景属性以及渐变属性等制作一个图标

在 CSS 中，我们可以利用盒子模型、边框属性、背景属性以及渐变属性来创建简单的网页图标。下面是一个基本的例子，展示如何使用这些特性制作一个简单的矩形图标：

/* 创建一个样式规则 */
.icon {
  display: inline-block; /* 使用块级元素可以设置宽高，保持在行内不会换行 */
  width: 64px; /* 设置图标宽度 */
  height: 64px; /* 设置图标高度 */
  border-radius: 50%; /* 圆角让图标看起来更像圆形 */
  background: linear-gradient(to right, #f00, #ff0); /* 制作渐变背景，从左到右颜色变化 */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果增加立体感 */
  padding: 8px; /* 内部填充，可以根据需要调整 */
}

/* 如果你想给边框添加颜色和宽度 */
.icon-bordered {
  border: 2px solid #ccc;
}

这个 `.icon` 类可以应用于 HTML 元素，如 `<div>` 或 `<span>`，如下所示：

<div class="icon icon-bordered">我的图标</div>