css设计图形的代码

在CSS中，设计图形通常通过结合使用内联样式、内嵌的`<style>`标签、外部CSS文件或者CSS预处理器（如Sass或Less）中的选择器和伪元素来实现。以下是几种常见的方法：

1. **基本形状**:
- `border-radius`: 设置圆角边框。
- `width` 和 `height`: 控制元素的尺寸。
- `padding` 和 `margin`: 内容周围的空间。

2. **使用伪元素**: 如`::before`和`::after`创建内容前后的图形元素。

   .shape {
     content: " ";
     width: 50px;
     height: 50px;
     background-color: blue;
     position: relative;
   }
   .shape::before {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(45deg);
     border: 10px solid red;
   }

3. **使用SVG (Scalable Vector Graphics)**:

   <svg>
     <rect x="0" y="0" width="100" height="100" fill="blue"/>
   </svg>

或者使用`use`元素引用外部SVG文件。

4. **CSS3渐变和阴影**: 创建复杂的背景效果。

   .gradient-box {
     background: linear-gradient(to right, red, yellow);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }