几个实用的CSS代码段总结

 

  废话不多说,直接上代码,希望能帮到有需要的小伙伴

 

  ①:遮罩

  

 

   position: fixed; background: rgba(0, 0, 0, .4); top: 0; left: 0; right: 0; bottom: 0; z-index: 99; width: 100%; height: 100%;

 

  

  ②:三角(下面三角的代码按照下图上右下左的顺序排列)

  

   width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent transparent #000 transparent;

 

  width: 0; height: 0; border-width: 8px; border-style: solid; border-color: #000 transparent transparent transparent;

 

  width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent #000 transparent transparent;

 

 

  width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent #000 transparent transparent;

 

 

  ③:圆

  

 display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #f6ad03;

 

 

 

  ④:图标

  

  width: 24px; box-shadow: 0 10px 0 2px #999, 0 20px 0 2px #999, 0 30px 0 2px #999;

 

  

  ⑤:超出隐藏

  

  width: 180px;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;

 

 

  6:垂直居中

  position: fixed; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

 

  注:针对元素有固定宽高的情况

 

  

   position: fixed; top: 50%; left: 50%; z-index: 999; transform: translate(-50%,-50%);

 

  注:针对元素无固定宽高的情况

 

  

  

 

  

  

 

相关文章