首先，在工作中秉着能用 css 完成的就不用切图的原则，一些略微特殊的样式还是尽量使用 css 展示以提高页面展示效率，以下是一些常用的属性：

1. 边框渐变（结合边框渐变可以完成比较常见的渐变分割条等效果

   /* 边框渐变 */
   /* 渐变方向有多种方式表示 角度 例如90deg 方向 例如to right */
   /* 实际使用可以选择顺手的 （方向的可以有更为复杂的组合写法 详见mdn官网 */
   border-width: 1px;
   border-style: solid;
   border-image-source: linear-gradient(90deg, #269cd7, #0090ea);
   border-image-slice: 1; /* 填充整个边框宽度 */
   border-image-repeat: stretch; /* 根据需要选择 repeat、stretch 或 round 等重复方式 */

2. 背景色渐变

   /* 渐变方向与上面的边框渐变同理 */
   /* 首先是 side by side 的渐变 */
   background-image: linear-gradient(to right, #0d80d7, #04477b);
   /* 其次是中心渐变 （可以结合div的不同排布 实现热力图展示 */
   background: radial-gradient(rgba(237, 34, 44,0.6), transparent, transparent);

3. 多个子元素斑马等样式展示

   /* 涉及到多个子元素不同样式则要用到 nth-child 伪类 */
   /* 老是记不清偶数和奇数怎么表示 -.-|  偶数even 奇数odd */
   /* 奇数子元素 */
   div:nth-child(odd) {
       background-color: #133260;
   }
   /* 偶数子元素 */
   div:nth-child(even) {
       background-color: #112b4e;
   }

4. … … 待更新 … …