css 学习笔记
css 学习笔记
text-indent: 2rem; //前面空两格
letter-spacing: 3px; //字体的间隔
word-spacing: 3px; //单词的间隔
word-wrap: break-word; //单词过长自动换行
word-break: break-all; //单词过长，强制切断然后换行
counter：计数器
ul {
counter-reset: sublist;
list-style: none;
}
li:before {
counter-increment: sublist;
content: counter(sublist)'.'
}
<div class="list">
<ul>
<li>title
<ul>
<li>subtitle</li>
<li>subtitle</li>
</ul>
</li>
<li>title</li>
<li>title</li>
<li>title</li>
</ul>
</div>//--变量
:root {
--color: red;
}
body {
backgroud: var(--color);
}
用：root声明全局变量，引用var(--color)
//img自适应
img{
width: 100%;
height: 100%;
object-fit: fill/contain/cover/none/scale-down;
//object-position === background
}
//边框
border-style: dotted 点状边框/ dashed 虚线边框/ solid 实线边框/ double 双实线边框，width最小为3px
//background 背景
//语法
background: green url('http://c.cncnimg.cn/037/264/1e4e_m.jpg') no-repeat center top fixed / cover content-box padding-box;
background-color: 色值;
background-image: url('');
background-repeat: repeat/no-repeat/repeat-X/repeat-Y; 是否重复
background-attachment: scroll/fixed; 是否固定
background-position: top left/center center/x% y%;位置
background-size: x% y%/auto/cover/contain;尺寸
background-origin: border-box/content-box/padding-box;定位区域
background-clip: border-box/content-box/padding-box/no-clip;绘制区域
background-origin和background-clip的区别
background-origin定义的是背景位置（background-position）的起始点；而background-clip是对背景（图片和背景色）的切割。
//animation 动画
//语法
-webkit-animation: name 6s ease 3s infinite normal;
@keyframes -webkit-animation {0% {}; 100% {}}
animation-name: name;
animation-duration: 6s;
animation-timing-function: linear/ease(默认值，快到慢)/ease-in(越来越快)
/ease-out(越来越慢)/ease-in-out(先加速后减速);
animation-delay: 3s;
animation-iteration-count: number/infinite;
animation-direction: normal/reverse(反向播放)/inherit(从父元素继承该属性)
/alternate(动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放)
/alternate-reverse(动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。)
//demo
<!DOCTYPE html>
<html >
<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 0.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 ><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 >在这里，图像平铺（重复），以填补该地区。</div>
<div class="ani"></div>
</body>
</html>