【01】Text color gradient
background:-webkit-linear-gradient(bottom,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
[02] Blurred text
text-shadow:0 0 10px red,0 0 10px yellow; // x轴距离、y轴距离、模糊距离、阴影颜色
【03】Background color gradient
Choose one of the following two pieces of code.
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】Graphic cropping
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
【05】Text reflection
Use box-reflect to achieve text reflection.
-webkit-box-reflect: below 0 -webkit-linear-gradient(transparent, transparent 50%, rgba(255, 255, 255, .3));
【06】Text input box
<!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】Gaussian Blur
.wrapper {
width: 500px;
height: 500px;
backdrop-filter: blur(10px);
background: rgba(122, 118, 142, 0.54);
}
[08] Text overflow
As shown in the following code, the single-line text overflows and displays the ellipsis.
.box {
white-space:nowrap; // 必须强制一行显示
overflow:hidden; // 超出部分隐藏
text-overflow:ellipsis; // 文字省略号代替超出的文本
}
As shown in the following code, the multi-line text is exceeded, and the last line displays an ellipsis.
.box {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
【09】Text vertical arrangement
As shown in the following code, the text is arranged vertically.
writing-mode: vertical-lr;
【10】Scroll bar
::-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] Chinese and English line break
In a fixed-width block element, content wraps as shown below.
1、填充的内容全部为纯英文或者纯数字时,在ie或者火狐中不会换行,且会撑大容器
2、当数字或英文中带有汉字时,会从汉字处换行
3、纯汉字可以自动换行。
The combination of word-wrap and word-break can effectively solve the line break problem.
.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] Use the background to achieve the split line effect
<!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] Set the smooth scrolling effect of the scroll bar
// 通过代码触发滚动时,滚动条移动是否平滑
.scroll-smooth {
scroll-behavior: smooth;
}