尚硅谷css3笔记
目录
一、新增长度单位
二、新增盒子属性
1.border-box 怪异盒模型
2.resize 调整盒子大小
3.box-shadow 盒子阴影
案例：鼠标悬浮盒子上时，盒子有一个过度的阴影效果
三、新增背景属性
1.background-origin 设置背景图的原点
2.background-clip 设置背景图向外裁剪的区域
案例：让背景图呈现在文字上
3.background-size 设置背景图的尺寸
4.多背景图,用逗号隔开
四、新增文本属性
1.text-shadow 文本阴影
2.white-space 文本换行
3.text-overflow 文本溢出
案例：一行超出的文本用...表示
4.text-decoration 文本修饰
5.-webkit-text-stroke 文本描边
五、新增渐变
1.linear-gradient 线性渐变
2.radial-gradient 径向渐变
3.重复渐变
4.案例
六、web字体
一、新增长度单位
①vw:相对于视口宽度的百分比
②vh:相对于视口高度的百分比
div{
width:20vw;
height:20vh;
}
二、新增盒子属性
1.border-box 怪异盒模型
div{
width:200px;
height:200px;
border:5px solid #fff;
box-sizing:boeder-box;
}
2.resize 调整盒子大小
resize一定要和overflow一起用
.box1{
width:400px;
height:400px;
resize:both;
overflow:scroll;
background:orange;
}
.box2{
width:800px;
height:800px;
background:blue;
}
3.box-shadow 盒子阴影
案例：鼠标悬浮盒子上时，盒子有一个过度的阴影效果
div{
width:300px;
height:300px;
background:orange;
transition:1s linear all;
}
div:hover{
box-shadow:0 0 10px black;
}
三、新增背景属性
1.background-origin 设置背景图的原点
div{
width:200px;
height:200px;
padding:20px;
border:20px dashed pink;
background-color:bule;
background-image:url("../../image.png");
background-repeat:no-repeat;
background-origin:border-box;
}
2.background-clip 设置背景图向外裁剪的区域
案例：让背景图呈现在文字上
1.设置字体颜色为透明色
2.设置background-clip：text
3.在background-clip前加上私有前缀
3.background-size 设置背景图的尺寸
4.多背景图,用逗号隔开
不能用background-image
四、新增文本属性
1.text-shadow 文本阴影
h1{
background:black;
text-shadow:0 0 20px red;
color:#fff;
margin:0 auto;
}
2.white-space 文本换行
3.text-overflow 文本溢出
案例：一行超出的文本用...表示
div{
width:200px;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
}
4.text-decoration 文本修饰
p{
text-decoration-line:underline;
text-decoration-style:wavy;
text-decoration-color:red;
}
5.-webkit-text-stroke 文本描边
h1{
-webkit-text-stroke:1px red;
color:transparent;
}
五、新增渐变
1.linear-gradient 线性渐变
.box1{
height:200px;
background-image: linear-gradient(red, yellow,green);
}
.box2{
height:200px;
background-image: linear-gradient(to right top, red, yellow,green);//往右上角
}
.box3{
height:200px;
background-image: linear-gradient(30deg, red, yellow,green); //顺时针偏转30度
}
.box4{
height:200px;
background-image: linear-gradient(red 50px, yellow 100px,green 150px);
}
.box5{
height: 200px;
background-image: linear-gradient(red 50px, yellow 100px,green 150px);
-webkit-background-clip:text;
color:transparent;
font-size:80px;
text-align:center;
}
2.radial-gradient 径向渐变
.box1{
width:300px;
height:200px;
background-image: radial-gradient(red, yellow,green);//默认从圆心四散
}
.box2{
width:300px;
height:200px;
background-image: radial-gradient(at right top, red, yellow,green);//调整圆心的位置
}
.box3{
width:300px;
height:200px;
background-image: radial-gradient(at 100px 50px, red, yellow,green);
}
.box4{
width:300px;
height:200px;
background-image: radial-gradient(circle, red, yellow,green);
}
.box5{
width:300px;
height:200px;
background-image: radial-gradient(200px 200px, red, yellow,green);//半径为200px
}
.box6{
width:300px;
height:200px;
background-image: radial-gradient(red 50px, yellow 100px ,green 150px);//从圆心开始，50px红色，100px黄色，150px绿色
}
.box7{
width:300px;
height:200px;
background-image: radial-gradient(100px 50px at 150px 150px,red, yellow,green);//圆心x100px y100px 半径x100px y50px
}
3.重复渐变
在设有具体像素值的线性渐变或者径向渐变前加上repeating-
4.案例
书签页 立体的球
#grad1 {
width:200px;
height: 200px;
border-radius:50%;
background-image: radial-gradient(at 80px 80px,#e66465, #9198e5);
}
#grad2{
width:800px;
height: 390px;
padding:0 10px;
border:1px solid black;
background-image: repeating-linear-gradient(transparent 0px, transparent 29px, gray 30px);
background-clip:content-box;//默认是border-box，从border向外裁剪，设成content-box,从content向外裁剪
}