一些常用的css（文字超过一行...显示、图片置灰、字体渐变、网格背景、居中显示等）

1、昵称超过一定宽度显示…

<div class="nickname">【<span>用户昵称hellohellohellospan>】的留言div>

.nickname {
    span {
        max-width: 200px;
        min-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        display: inline-block;
        vertical-align: top;
    }
}

效果图

2、图片灰色显示 — grayscale(0%)

 <div class="grayscale-box">
   <ul>
       <li class="cur"><img src="../assets/图片1.png" alt="">li>
       <li><img src="../assets/图片2.png" alt="">li>
       <li><img src="../assets/图片3.png" alt="">li>
    ul>
 div>

.grayscale-box {
    ul {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        li {
            filter: grayscale(0%);
            list-style: none;
            &.cur {
                filter: grayscale(100%);
            }
        }
    }  
}

效果图

3、字体颜色渐变

<div class="clip-text">April 1th - 15thdiv>

.clip-text {
    font-weight: 700;
    background: linear-gradient(90deg, #F365AC 0%, #35C7B8 30.36%);
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
}

效果图

4、渐变线框

<div class="clip-border">渐变线框div>

.clip-border {
    border: 2px solid;
    border-image: -webkit-linear-gradient(45deg, #d8aa47, #fffabc) 20 20;
    border-image: -moz-linear-gradient(45deg, #d8aa47, #fffabc) 20 20;
    border-image: -o-linear-gradient(45deg, #d8aa47, #fffabc) 20 20;
    border-image: linear-gradient(45deg, #d8aa47, #fffabc) 20 20;
    color: #f64e5e;
}

效果图

5、文字填充

<div class="text-fill cur">
   <span>文字填充span>
div>

.text-fill {
    position: relative;
    text-align: center;
    cursor: pointer;
    // width: 165px;
    height: 70px;
    line-height: 70px;
    background: #f9e3d5;
    border-radius: 15px;
    span {
        margin: 10px;
        padding-top: 5px;
        display: inline-block;
        width: 165px;
        height: 70px;
        line-height: 1.2;
        font-weight: 500;
        color: transparent;
        text-shadow: 1px 5px 2px #000, 1px 5px 2px #000;
        -webkit-text-fill-color: #fff;/*文字的填充色*/
        -webkit-text-stroke: 1px #4c426e;
    }
}

效果图

6、背景网格

<div class="rank-list">
    这里是文案～～～
div>

.rank-list {
    padding: 20px;
    position: relative;
    color: #665a8a;
    background-color: #f4f2fb;
    background-image: linear-gradient(to bottom,#e4e0f3 0,#e4e0f3 1px,transparent 1px),linear-gradient(to right, #e4e0f3 0, #e4e0f3 1px, transparent 1px);
    background-size: 25px 25px;
    background-repeat: repeat;
    border: 1px solid #bdb7d3;
    color: #665a8a;
     &::before {//边框上下背景图
       content: "";
         position: absolute;
         left: 0;
         top: -16px;
         width: 100%;
         height: 16px;
         background: url("../assets/wave-line.png") repeat center;
         background-size: cover;
     }
     &::after {
         content: "";
         position: absolute;
         left: 0;
         bottom: -16px;
         width: 100%;
         height: 16px;
         background: url("../assets/wave-line-bottom.png") repeat center;
         background-size: cover;
     }

}

效果图
7、三角形按钮

 <div v-show='is_more && list.data.length>defaultIndex' class="btn-moreOne" @click="showMore">
   <span>查看更多span><span>span>
 div>

 .btn-moreOne {
    display: flex;
    justify-content: space-between;
    align-items: center;
     padding: 0 20px;
     margin: 0 auto;
     cursor: pointer;
     text-align: center;
     width: 170px;
     height: 50px;
     color: #fff;
     background: #ee7d6e;
     border-radius: 25px;
     span:nth-child(2) {
         width: 0;
         height: 0;
         border-left: 8px solid transparent;
         border-right: 8px solid transparent;
         border-top: 15px solid #fff;
     }
 }

效果图

8、两种居中显示的方法

8.1 固定宽高
father：position：relative;
child：position:absolute；top:0;left:0;right:0;bottom:0;margin:auto;
8.2 不固定宽高
father：position：relative;
child: position:absolute; top:50%;left:50%;transfore:translate(-50%,-50%);

9、字符超出部分换行

.wrap{overflow-wrap:break-word;}

字符超出位置使用连字符：

.hyphens{hyphens:auto;}

单行/多行文本超出省略：

.line-clamp {
	overflow:hidden; 
	text-overflow:ellipsis;
	dispaly:-webkit-box;
	-webkit-line-ckamp:2;//文本最多显示两行
	-webkit-box-orient:vertical;
}

10、一些css命名

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
页面主体：main
登录条：loginbar
标志：logo
广告：banner
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

11、这里可以让你寻找到使用或者是学习 CSS 的灵感，以分类的形式，展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。
https://chokcoco.github.io/CSS-Inspiration/#/