利用css 实现一些效果

1.设置阴影

当使用透明图像时，可以使用 drop-shadow() 函数在图像上创建阴影，而不是使用 box shadow 属性在元素的整个框后面创建矩形阴影：drop-shadow

               <div class="shadow-style">
                    <div>
                        <div class="mb-1 text-center">
                            box-shadow
                        </div>
                        <img class="box-shadow" src={imgUrl} alt="Image with box-shadow" />
                    </div>
                    &nbsp;&nbsp;
                    <div>
                        <div class="text-center">
                            drop-shadow
                        </div>
                        <img class="drop-shadow" src={imgUrl} alt="Image with drop-shadow"/>
                    </div>
                </div>

.shadow-style {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-center {
    text-align: center;
}
.box-shadow {
    box-shadow: 2px 4px 8px #585858;
}
.drop-shadow {
    filter: drop-shadow(2px 4px 8px #585858);
}

tiantian.png

2.自定义光标

可以使用自定义图像，甚至表情符号来作为光标。

              <div class="cursor-style">
                    <div class="tile">
                        Default
                    </div>
                    <div class="tile tile-png-cursor">
                        png
                    </div>
                    <div class="tile tile-svg-cursor">
                        svg
                    </div>
                </div>

.cursor-style{
    display: flex;
}
.tile {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #de5448;
    margin-right: 10px;
    color: #fff;
    font-size: 1.4em;
    text-align: center;
}

.tile-png-cursor {
    background-color: #1da1f2;
    cursor: url(../../img/tiantianquan.png), auto;
}

.tile-svg-cursor {
    background-color: #4267b2;
    cursor: url(../../img/fire.svg),auto;
}

3.文本溢出，截断，显示...

<div class='ellipsis-style ellipsis-two-style'>
   这是一行的溢出，这是一行的溢出，这是一行的溢出，这是一行的溢出，这是一行的溢出，这是一行的溢出，
</div>

1:一行文本
.ellipsis-style{
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
2:两行文本溢出
.ellipsis-two-style{
    width: 200;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    word-break: break-all;
}

elint.png

elint2.png

4.自定义选中的样式

CSS 伪元素::selection

  <div >
       <div class="default-highlighting">
          默认高亮
        </div>
        <div class="default-highlighting custom-highlighting">
           自定义高亮
        </div>
  </div>

.default-highlighting {
    font-size: 2rem;
    font-family: sans-serif;
}

.custom-highlighting::selection {
    background-color: #8e44ad;
    color: #fff;
}

linghting.png

5.设置空元素的样式

伪类元素::empty

<div className="wrapper">
      <div className="box"></div>
      <div className="box">这是有文字呦！</div>
</div>

.wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    display: inline-block;
    background: #f5222d;
    border: 1px solid #ddd;
    height: 200px;
    width: 200px;
    margin-right: 15px;
}

.box:empty {
    background: #ffbf00;
}

empty.png

6.自定义滚动条

<div class="tile tile-custom-scrollbar">
   <div class="tile-content">
         自定义滚动条
    </div>
</div>

.tile {
    overflow: auto;
    display: inline-block;
    background-color: #ccc;
    height: 200px;
    width: 180px;
}
.tile-content {
    padding: 20px;
    height: 500px;
}
.tile-custom-scrollbar::-webkit-scrollbar {
    width: 12px;
    background-color: #eff1f5;
}

.tile-custom-scrollbar::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: transparent;
}

.tile-custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #ffbf00;
    border: 2px solid #eff1f5
}

scroll.png

7.渐变边框

<div class="box gradient-border">
     炫酷渐变边框
 </div>

.gradient-border {
    border: solid 5px transparent;
    border-radius: 10px;
    background-image: linear-gradient(white, white),
        linear-gradient(315deg, #833ab4, #fd1d1d 50%, #fcb045);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.box {
    width: 350px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 100px auto;
}

clip.png

8.灰度图片

grayscale()

<div class="box">
    <img class="default-img" src={QQ_ICON} />
    <img class="grayscale-img" src={QQ_ICON} />
 </div>

.box {
    width: 600px;
    height: 200px;
    display: flex;
}
img {
    width: 300px;
    margin-right: 10px;
}

.grayscale-img {
    filter: grayscale(100%);
}

grayscale.png