一些常用的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%);
            }
        }
    }  
}

效果图
一些常用的css(文字超过一行...显示、图片置灰、字体渐变、网格背景、居中显示等)_第1张图片
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;
}

效果图
一些常用的css(文字超过一行...显示、图片置灰、字体渐变、网格背景、居中显示等)_第2张图片
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;
}

效果图
一些常用的css(文字超过一行...显示、图片置灰、字体渐变、网格背景、居中显示等)_第3张图片
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;
    }
}

效果图
一些常用的css(文字超过一行...显示、图片置灰、字体渐变、网格背景、居中显示等)_第4张图片
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;
     }

}

效果图
一些常用的css(文字超过一行...显示、图片置灰、字体渐变、网格背景、居中显示等)_第5张图片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/#/

你可能感兴趣的:(css,css,html,css3)