尚硅谷css3笔记

目录

一、新增长度单位

二、新增盒子属性

[1.border-box 怪异盒模型](#1.border-box 怪异盒模型)

[2.resize 调整盒子大小](#2.resize 调整盒子大小)

[3.box-shadow 盒子阴影](#3.box-shadow 盒子阴影)

案例:鼠标悬浮盒子上时,盒子有一个过度的阴影效果

三、新增背景属性

[1.background-origin 设置背景图的原点](#1.background-origin 设置背景图的原点)

[2.background-clip 设置背景图向外裁剪的区域](#2.background-clip 设置背景图向外裁剪的区域)

案例:让背景图呈现在文字上

[3.background-size 设置背景图的尺寸](#3.background-size 设置背景图的尺寸)

4.多背景图,用逗号隔开

四、新增文本属性

[1.text-shadow 文本阴影](#1.text-shadow 文本阴影)

[2.white-space 文本换行](#2.white-space 文本换行)

[3.text-overflow 文本溢出](#3.text-overflow 文本溢出)

案例:一行超出的文本用...表示

[4.text-decoration 文本修饰](#4.text-decoration 文本修饰)

[5.-webkit-text-stroke 文本描边](#5.-webkit-text-stroke 文本描边)

五、新增渐变

[1.linear-gradient 线性渐变](#1.linear-gradient 线性渐变)

[2.radial-gradient 径向渐变](#2.radial-gradient 径向渐变)

3.重复渐变

4.案例

六、web字体


一、新增长度单位

①vw:相对于视口宽度的百分比

②vh:相对于视口高度的百分比

css 复制代码
div{
    width:20vw;
    height:20vh;
}

二、新增盒子属性

1.border-box 怪异盒模型

css 复制代码
div{
    width:200px;
    height:200px;
    border:5px solid #fff;
    box-sizing:boeder-box;
}

2.resize 调整盒子大小

resize一定要和overflow一起用

css 复制代码
<div class="box1">
    <div class="box2"></div>
</div>

.box1{
    width:400px;
    height:400px;
    resize:both;
    overflow:scroll;
    background:orange;
}

.box2{
    width:800px;
    height:800px;
    background:blue;
}

3.box-shadow 盒子阴影

案例:鼠标悬浮盒子上时,盒子有一个过度的阴影效果

css 复制代码
div{
    width:300px;
    height:300px;
    background:orange;
    transition:1s linear all;
}

div:hover{
    box-shadow:0 0 10px black;
}

三、新增背景属性

1.background-origin 设置背景图的原点

css 复制代码
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 文本阴影

css 复制代码
h1{
    background:black;
    text-shadow:0 0 20px red;
    color:#fff;
    margin:0 auto;
}

2.white-space 文本换行

3.text-overflow 文本溢出

案例:一行超出的文本用...表示

css 复制代码
div{
    width:200px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}

4.text-decoration 文本修饰

css 复制代码
p{
	text-decoration-line:underline;
	text-decoration-style:wavy;
	text-decoration-color:red;
}

5.-webkit-text-stroke 文本描边

css 复制代码
h1{
	-webkit-text-stroke:1px red;
	color:transparent;
}

五、新增渐变

1.linear-gradient 线性渐变

css 复制代码
.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 径向渐变

css 复制代码
.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.案例

书签页 立体的球

css 复制代码
#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向外裁剪
}

六、web字体

相关推荐
脑袋大大的13 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0123 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
Andy杨1 小时前
20250712-1-Kubernetes 监控与日志管理-K8s日志管理与维护_笔记
笔记·容器·kubernetes
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
撰卢1 小时前
【个人笔记】负载均衡
运维·笔记·负载均衡
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
栈溢出了2 小时前
MyBatis实现分页查询-苍穹外卖笔记
java·笔记·mybatis
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
之歆2 小时前
Python-魔术方法-创建、初始化与销毁-hash-bool-可视化-运算符重载-容器和大小-可调用对象-上下文管理-反射-描述器-二分-学习笔记
笔记·python·学习