【01】文字颜色渐变
background:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;【02】文字模糊
text-shadow:0 0 10px red,0 0 10px yellow; // x轴距离、y轴距离、模糊距离、阴影颜色【03】背景颜色渐变
如下两段代码任选其一。
background: repeating-linear-gradient(to left, #ff0, #0f0);background: -webkit-linear-gradient(left, #1494f5, #28f7ff);
background: -ms-linear-gradient(left, #1494f5, #28f7ff);
background: -moz-linear-gradient(left, #1494f5, #28f7ff);
background: -o-linear-gradient(left, #1494f5, #28f7ff);【04】图形裁剪
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);【05】文字倒影
利用box-reflect实现文字倒影。
-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .3));【06】文本输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.search {
width: 258px;
height:35px;
position:absolute;
top:31px;
left:64px;
}
input {
width:484px;
outline:none;
border:none;
background:transparent;
margin:4px 0 0 6px;
color:#000;
font-size:18px;
font-family:"SourceHanSansCN-Regular";
}
</style>
</head>
<body>
<div class="search">
<input placeholder="关键字查询"></input>
</div>
</body>
</html>【07】高斯模糊
.wrapper {
width: 500px;
height: 500px;
backdrop-filter: blur(10px);
background: rgba(122, 118, 142, 0.54);
}【08】文本溢出
如下代码所示，实现单行文本溢出显示省略号。
.box {
white-space:nowrap; // 必须强制一行显示
overflow:hidden; // 超出部分隐藏
text-overflow:ellipsis; // 文字省略号代替超出的文本
}如下代码所示，实现多行文本超出，末行显示省略号。
.box {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}【09】文本垂直排列
如下代码所示，实现文字垂直排列。
writing-mode: vertical-lr;【10】滚动条
::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #56deff;
}
::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: #ededed;
}【11】中英文换行
固定宽度的块状元素中，内容换行如下所示。
1、填充的内容全部为纯英文或者纯数字时，在ie或者火狐中不会换行，且会撑大容器
2、当数字或英文中带有汉字时，会从汉字处换行
3、纯汉字可以自动换行。word-wrap和word-break配合使用可以有效解决换行问题。
.box {
word-wrap:break-word;
word-break:break-all;
}word-wrap有两种取值：
1）normal
2）break-word: 强制换行（内容将在边界内换行，中文没有任何问题，英文语句也没有问题，
但对于长串的英文就不起作用）word-break用来控制断词，有三种取值：
1）normal
2）break-all: 断开单词（在单词到边界时，下个字母自动到下一行，主要解决了长串英文的问题）
3）keep-all: 是指Chinese, Japanese, and Korean不断词，一句话一行，可以用来排列古诗哟【12】利用背景实现分割线效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,body{
background-color: #000;
}
.box {
width: 100%;
height: 20px;
background: linear-gradient(to right, rgba(255,255,255), rgba(255,255,255)) no-repeat,
linear-gradient(to right, rgba(255,255,255, 0.6), rgba(255,255,255, 0.6)) no-repeat,
linear-gradient(to right, rgba(255,255,255), rgba(255,255,255)) no-repeat;
background-size: 8px 2px, 1130px 1px, 8px 2px;
background-position: 0px 100%, 0px 100%, 1123px 100%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
【13】设置滚动条平滑滚动效果
// 通过代码触发滚动时，滚动条移动是否平滑
.scroll-smooth {
scroll-behavior: smooth;
}
扫描二维码关注公众号，回复：
15514670 查看本文章
