Css样式整理

带边框的小箭头.png

<div class="border-triangle-right"></div>
<style>
        .border-triangle-right {
            width: 100px;
            height: 30px;
            border: 1px solid #1d9cd6;
            position: relative;
            border-radius: 6px;
            z-index: 999;
        }
        
        .border-triangle-right:after,
        .border-triangle-right:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border: 6px solid transparent;
            border-left-color: #1d9cd6;
            right: -12px;
            margin-left: -4px;
            top: 33%;
        }
        
        .border-triangle-right:after {
            border-left-color: #fff;
            top: 33%;
            right: -10px;
        }
    </style>

标签页横线带小箭头

标签页横线带小箭头

<a class="active" href="#">栏目1</a>
<style>
  .active{
    position: relative;
  }
  .active::before {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 45%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid transparent;
    border-bottom: 4px solid #d10a0a;
    z-index: 999;
}
</style>

单行溢出省略号

.text{
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行溢出省略号

.text{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

背景色渐变

header {
  background: linear-gradient(left, #168d7d, #77f1e0);
  background: -ms-linear-gradient(left, #168d7d, #77f1e0);
  background: -webkit-linear-gradient(left, #168d7d, #77f1e0);
  background: -moz-linear-gradient(left, #168d7d, #77f1e0);
}