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;
}
}
<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%);
}
}
}
}
<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;
}
<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;
}
<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;
}
}
<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;
}
}
<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.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/#/