css 常用的一些样式整理

1。 文字一行显示超出省略号显示

 display: inline-block;

  width: 80%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow:ellipsis;

多行显示

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;//设置显示几行

-webkit-box-orient: vertical;

2。居中定位

 position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50);

3.实现圆环  （伪类）

<div class="element2"></div>

.element2{

            position: absolute;

            left: 15%;

            top:50%;

            display: inline-block;

            width: 0.18rem;

            height: 0.18rem;

            line-height: 0.3rem;

            background-color: rgba(255,255,255,0.7);

            border-radius: 50%;

            transform: translate(0,-50%);

        }

        .element2:before{

            content: "";

            display: block;

            width: 0.14rem;

            height: 0.14rem;

            border-radius: 50%;

            background-color: #000;

            position: relative;

            top: 0.02rem;

            left: 0.02rem;

        }

        .element2:after{

            content: "";

            display: block;

            width: 0.1rem;

            height: 0.1rem;

            border-radius: 50%;

            background-color: rgba(255,255,255,0.7);

            position: relative;

            top: -0.1rem;

            left: 0.04rem;

        }

4.  画半圆弧

<div class="headerBoxellipse" style="

            width: 300px;

            height: 30px;

            line-height: 100px;

            text-align: center;

            background-color: rgb(255, 255, 255);

            border-radius: 0px 0px 50% 50% / 0px 0px 100% 100%;

            transform: rotate(deg);

            z-index: 22;

            left: 50%;

            top: 100px;

            transform: translate(-50%, 0);

        ">