CSS样式优化

边框样式 – 四角边框

效果：

代码：

<div class="card_div">
  <div class="border_corner border_corner_left_top"></div>
  <div class="border_corner border_corner_right_top"></div>
  <div class="border_corner border_corner_left_bottom"></div>
  <div class="border_corner border_corner_right_bottom"></div>
  ...
</div>

// 卡片样式
  .card_div{
    
    
    min-height: 200px;
    border: 1px solid #21a7e1;
    box-shadow: 5px 5px 10px 10px  rgba(24,68,124,0.4);
    padding-top:20px;
    border-radius: 6px;
    position: relative;
    /*四个角框*/
    .border_corner{
    
    
      z-index: 2500;
      position: absolute;
      width: 19px;
      height: 19px;
      background: rgba(0,0,0,0);
      border: 4px solid #1fa5f1;
    }
    .border_corner_left_top{
    
    
      top: -2px;
      left: -2px;
      border-right: none;
      border-bottom: none;
      border-top-left-radius: 6px;
    }
    .border_corner_right_top{
    
    
      top: -2px;
      right: -2px;
      border-left: none;
      border-bottom: none;
      border-top-right-radius: 6px;
    }
    .border_corner_left_bottom{
    
    
      bottom: -2px;
      left: -2px;
      border-right: none;
      border-top: none;
      border-bottom-left-radius: 6px;
    }
    .border_corner_right_bottom{
    
    
      bottom: -2px;
      right: -2px;
      border-left: none;
      border-top: none;
      border-bottom-right-radius: 6px;
    }
  }

各种分割线

<div class="对应类名"></div>

// 实线

.splitLine_Virtualization {
    
    
  width: 100%;
 border: 0;
 border-top: 1px solid #d0d0d5;
}

// 渐变线

// 渐变线-两边虚化
.splitLine_Virtualization_sides {
    
    
  width: 100%;
  border: 0;
  padding-top: 1px;
  background: linear-gradient(to right, transparent, #d0d0d5, transparent);
}
// 渐变线-右边虚化
.splitLine_Virtualization_right {
    
    
  width: 100%;
  border: 0;
  padding-top: 1px;
  background: linear-gradient(to right, #d0d0d5, transparent);
}

// 点线

.splitLine_Virtualization {
    
    
	width: 100%;
	border: 0;
	border-top: 1px dotted #a2a9b6;
}	

//虚线

.splitLine_Virtualization {
    
    
	width: 100%;
	border: 0;
	border-top: 1px dashed #a2a9b6;
}	

// 疏密可控的虚线

.splitLine_Virtualization {
    
    
	width: 100%;
	border: 0;
	padding-top: 1px;
	background: repeating-linear-gradient(to right, #a2a9b6 0px, #a2a9b6 4px, transparent 0px, transparent 12px);
	}

//双实线

.splitLine_Virtualization {
    
    
	width: 100%;
	border: 0;
	border-top: 1px double #a2a9b6;
}	

//斜纹分隔线

.splitLine_Virtualization {
    
    
	width: 100%;
	border: 0;
	padding: 3px;
	background: repeating-linear-gradient(135deg, #a2a9b6 0px, #a2a9b6 1px, transparent 1px, transparent 6px);
}	

//波浪线

.splitLine_Virtualization {
    
    
	width: 100%;
	border: 0;
	color: #d0d0d5;
	height: .5em;
	white-space: nowrap;
	letter-spacing: 100vw;
	padding-top: .5em;
}	
.splitLine_Virtualization::before {
    
    
		content: "\2000\2000";
		/* IE浏览器实线代替 */
		text-decoration: overline;
		/* 现代浏览器 */
		text-decoration: overline wavy;
	}
**//阴影线**

```javascript
.splitLine_Virtualization {
    
    
	width: 100%;
	border: 0;
	padding-top: 10px;
	color: #d0d0d5;
	border-top: 1px solid rgba(0, 0, 0, .1);
	box-shadow: inset 0 10px 10px -10px;
}	

字体

-机械字体

（可网上找）字体文件链接：https://pan.baidu.com/s/1j9TGAh4qUZZkG1ZbqOzDjw
提取码：mr9l

.ttf格式字体库文件引用方式

@font-face
{
    
    
  font-family: DigifaceFont; // 自定义名字
  src: url('font/Digiface Regular.ttf') // 文件位置
}
// 使用
font-family: 'DigifaceFont';

.eot和.woff格式字体库文件引用方式

@font-face
{
    
    
  font-family: 'UnidreamLED'; // 自定义名字
  src:url(font/UnidreamLED.eot); // 兼容ie9
  src:url(font/UnidreamLED.eot?#iefix)format('embedded-opentype'), // 兼容ie6-ie8
  url('font/UnidreamLED.woff') format('woff'),
  local('UnidreamLED'), url("font/UnidreamLED.woff");
}
// 使用
font-family: 'UnidreamLED';