text-indent: 2rem; //前面空两格
letter-spacing: 3px; //字体的间隔
word-spacing: 3px; //单词的间隔
word-wrap: break-word; //单词过长自动换行
word-break: break-all; //单词过长，强制切断然后换行
border-style: dotted 点状边框/ dashed 虚线边框/ solid 实线边框/ double 双实线边框，width最小为3px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* transform-origin */
.trans-origin {
position: absolute;
width: 200px;
height: 60px;
}
.trans-origin::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 200px;
height: 2px;
background: deeppink;
transition: transform .5s;
transform: scaleX(0);
transform-origin: 100% 0;
}
.trans-origin:hover::before {
transform: scaleX(1);
transform-origin: 0 0;
}
/*不能选择文本*/
body{
/*-webkit-user-select: none;
-moz-user-select: none;
user-select: none;*/
/*pointer-events: none;*/
}
/*改变data-unit的值的颜色*/
[data-unit]:after{
content: attr(data-unit);
color: #f00;
}
/*文本选中的颜色*/
::selection {
background: #f00;
color: #FFFF00;
}
.img{
height: 150px;
width: 150px;
border: 1px solid currentColor;
border-radius: 50%;
overflow: hidden;
background: currentColor;
}
/*img自适应*/
img{
width: 100%;
height: 100%;
object-fit: cover;
}
/*超过两行显示省略号*/
.text {
width:220px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.text1{
margin-top: 20px;
width: 200px;
overflow: hidden;
text-overflow: ellipsis; /* 显示省略号 */
white-space: nowrap; /* 强制不换行 */
}
.content{
position: relative;
height: 200px;
width: 200px;
border: 1px solid;
margin-top: 20px;
}
.live-after:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 transparent;
}
/*制作伪类动画效果*/
.live-after:hover:after{
background: #FFFF00;
box-shadow: 0 0 20px 20px #aaa;
transform: scale(1.4) rotate(180deg);/*translate3d(30px, 30px, 40px)*/
transition: all 1s linear;
opacity: 0;
}
/*
box-shadow的知识
h-shadow: 必需的，水平阴影的位置，允许负值
v-shadow: 必需的，垂直阴影的位置，允许负值
blur: 可选。模糊距离
spread: 可选。阴影的大小
color: 可选。阴影的颜色
inset: 可选。从外层的阴影改变阴影内侧阴影
*/
#borderimg1 {
margin-top: 10px;
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url('http://c.cncnimg.cn/037/264/1e4e_m.jpg') 30 round; /* Safari 3.1-5 */
-o-border-image: url('http://c.cncnimg.cn/037/264/1e4e_m.jpg') 30 round; /* Opera 11-12.1 */
border-image: url('http://c.cncnimg.cn/037/264/1e4e_m.jpg') 30 round;
}
.ani{
margin-top: 10px;
width:100px;
height:100px;
background:#ddd;
position:relative;
animation:ani 3s linear 2s infinite;;
-webkit-animation:ani 3s linear 2s infinite; /*Safari and Chrome*/
}
@keyframes ani
{
0% {left:0;opacity: 1} /* from == 0% */
50% {left:200px; opacity: 0}
100% {left: 0; opacity: 1} /* to == 100% */
}
@-webkit-keyframes ani /*Safari and Chrome*/
{
0% {left:0;opacity: 1} /* from == 0% */
50% {left:200px; opacity: 0}
100% {left: 0; opacity: 1} /* to == 100% */
}
</style>
</head>
<body>
<div style="height: 80px">
<h3 class="trans-origin">trans-origin</h3>
</div>
<h2>生命得耀眼不坚持到最后怎么能看得到</h2>
<p data-unit="元">剩余话费40</p>
<div class="img">
<img src="http://c.cncnimg.cn/037/264/1e4e_m.jpg" alt="">
</div>
<div class="text">
生命得耀眼不坚持到最后怎么能看得到生命得耀眼不坚持到最后怎么能看得到
生命得耀眼不坚持到最后怎么能看得到生命得耀眼不坚持到最后怎么能看得到
生命得耀眼不坚持到最后怎么能看得到生命得耀眼不坚持到最后怎么能看得到
</div>
<div class="text1">
生命得耀眼不坚持到最后怎么能看得到生命得耀眼不坚持到最后怎么能看得到
生命得耀眼不坚持到最后怎么能看得到生命得耀眼不坚持到最后怎么能看得到
生命得耀眼不坚持到最后怎么能看得到生命得耀眼不坚持到最后怎么能看得到
</div>
<div class="content">
<div class="live-after"></div>
</div>
<div id="borderimg1">在这里，图像平铺（重复），以填补该地区。</div>
<div class="ani"></div>
</body>
</html>
浙公网安备 33010602011771号