尚硅谷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一起用

<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 盒子阴影

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

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向外裁剪
}

 

 六、web字体

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45915.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue watch监听对象 新旧值一样

vue3中watch监听新旧值一样的处理方式 废话不多说&#xff0c;直接上代码 const objectReactive reactive({user: {id: 1,name: zhangsan,age: 18,}, }) watch(() > objectReactive.user,(n, o) > {console.log(n, o)if (JSON.stringify(n) JSON.stringify(o)) {retu…

【Elasticsearch】spring-boot-starter-data-elasticsearch的使用以及Elasticsearch集群的连接

更多有关博主写的往期Elasticsearch文章 标题地址【ElasticSearch 集群】Linux安装ElasticSearch集群&#xff08;图文解说详细版&#xff09;https://masiyi.blog.csdn.net/article/details/131109454基于SpringBootElasticSearch 的Java底层框架的实现https://masiyi.blog.c…

STM32 定时器复习

12MHz晶振的机器周期是1us&#xff0c;因为单片机的一个机器周期由6个状态周期组成&#xff0c;1个机器周期6个状态周期12个时钟周期&#xff0c;因此机器周期为1us。 51单片机常用 for(){__nop(); //执行一个机器周期&#xff0c;若想循环n us&#xff0c;则循环n次。 }软件…

Streamlit项目:基于讯飞星火认知大模型开发Web智能对话应用

文章目录 1 前言2 API获取3 官方文档的调用代码4 Streamlit 网页的搭建4.1 代码及效果展示4.2 Streamlit相关知识点 5 结语 1 前言 科大讯飞公司于2023年8月15日发布了讯飞认知大模型V2.0&#xff0c;这是一款集跨领域知识和语言理解能力于一体的新一代认知智能大模型。前日&a…

Stable Diffusion原理详解

Stable Diffusion原理详解 最近AI图像生成异常火爆&#xff0c;听说鹅厂都开始用AI图像生成做前期设定了&#xff0c;小厂更是直接用AI替代了原画师的岗位。这一张张丰富细腻、风格各异、以假乱真的AI生成图像&#xff0c;背后离不开Stable Diffusion算法。 Stable Diffusion…

java 微信小程序授权获取用户手机号码 (完整demo)

1. 前端获取动态令牌 code https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 2. 后端接收令牌code, 调用微信获取手机号接口 POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_tokenACCESS_TOKEN 3. con…

[附源码]计算机毕业设计-JAVA火车票订票管理系统-springboot-论-文-ppt

PPT论文 文章目录 前言一、主要技术javaMysql数据库JSP技术 二、系统设计三、功能截图总结 前言 本论文主要论述了如何使用JAVA语言开发一个火车订票管理系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想…

ORB-SLAM2学习笔记7之System主类和多线程

文章目录 0 引言1 整体框架1.1 整体流程 2 System主类2.1 成员函数2.2 成员变量 3 多线程3.1 ORB-SLAM2中的多线程3.2 加锁 0 引言 ORB-SLAM2是一种基于特征的视觉SLAM&#xff08;Simultaneous Localization and Mapping&#xff09;系统&#xff0c;它能够从单个、双目或RBG…

jvm-jvm与java体系结构

1.JAVA及JVM简介 jvm发展历程 sun classic vm jdk1.4时完全被淘汰 Exact VM 准确式内存管理 HotSpot VM JRockit 专注于服务端 IBM J9 2.虚拟机与JAVA虚拟机 java虚拟机就是二进制字节码的运行环境&#xff0c;负责装载字节码到其内部&#xff0c;解释/编译为对应平台上的机…

c++——c/c++中的static和const

C语言和c中的static关键字与const关键字 static&#xff1a; //改变存储区域&#xff0c;限制作用域 ①、改变存储区域&#xff1a; 在不同的上下文中&#xff0c;static 关键字可以用于改变变量或函数的存储区域。在函数内部&#xff0c;static 用于将局部变量的生存期从函数…

线性代数的学习和整理7:各种特殊矩阵(草稿-----未完成)

目录 1 单位矩阵 为什么单位矩阵I是 [1,0;0,1]T 而不是[1,1;1,1]T 2 旋转矩阵 3 伸缩矩阵 放大缩小倍数矩阵 4 镜像矩阵 5 剪切矩阵 1 矩阵 1.1 1维的矩阵 行向量列向量 1.2 2维的矩阵 一般2维表都可以看作矩阵。矩阵的每个维度可以是1个数字&#xff0c;也可以是多个…

Appium-移动端自动测试框架,如何入门?

Appium是一个开源跨平台移动应用自动化测试框架。 既然只是想学习下Appium如何入门&#xff0c;那么我们就直奔主题。文章结构如下&#xff1a; 1、为什么要使用Appium&#xff1f; 2、如何搭建Appium工具环境?(超详细&#xff09; 3、通过demo演示Appium的使用 4、Appium如何…

通讯录的实现

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大一&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 望小伙伴们点赞&#x1f44d;收藏✨加关注哟&#x1f495;&#x1…

【Java 排序】冒泡排序(升降序,Int类型,Double类型,多数组排序)(111)

思路&#xff1a; 用二重循环实现&#xff0c;外循环变量设为i&#xff0c;内循环变量设为j。假如有n个数需要进行排序&#xff0c;则外循环重复n-1次&#xff0c;内循环依次重复n-1&#xff0c;n-2&#xff0c;…&#xff0c;1次。每次进行比较的两个元素都是与内循环j有关的&…

深入理解分布式架构,构建高效可靠系统的关键

深入探讨分布式架构的核心概念、优势、挑战以及构建过程中的关键考虑因素。 引言什么是分布式架构&#xff1f;分布式架构的重要性 分布式系统的核心概念节点和通信数据分区与复制一致性与一致性模型负载均衡与容错性 常见的分布式架构模式客户端-服务器架构微服务架构事件驱动…

[国产MCU]-W801开发实例-GPIO输入与中断

GPIO输入与中断 文章目录 GPIO输入与中断1、硬件准备2、软件准备3、驱动实现4、驱动测试W801的GPIO支持软件配置中断,中断触发方式包含:上升沿触发、下降沿触发、高电平触发、低电平触发。本文在前面[ 国产MCU]-W801开发实例-按键与GPIO输入的基础上实现GPIO中断配置。 1、硬…

Android瀑布流

以下是一个简单的示例代码&#xff0c;演示如何在Android Studio中解析指定网页的图片URL&#xff0c;并展示在错乱瀑布流布局中&#xff1a; 1. 添加网络权限&#xff1a;在项目的AndroidManifest.xml文件中添加以下权限&#xff1a; <uses-permission android:name"…

Linux定时任务crontab

常用命令 crontab -e 进入定时脚本&#xff0c;编辑后保存即立即生效 crontab -l 查看用户定时脚本 tail -f /var/log/cron 查看执行日志 service crond status 查看定时器运行状态 service crond restart 重启定时器 定时任务不执行原因 定时任务设置的格式正确&#xff0c;手…

分布式 | 如何搭建 DBLE 的 JVM 指标监控系统

本篇文章采用 Docker 方式搭建 Grafana Prometheus 实现对 DBLE 的 JVM 相关指标的监控系统。 作者&#xff1a;文韵涵 爱可生 DBLE 团队开发成员&#xff0c;主要负责 DBLE 需求开发&#xff0c;故障排查和社区问题解答。 本文来源&#xff1a;原创投稿 爱可生开源社区出品&a…

亚马逊点击广告对于卖家有什么好处

亚马逊点击广告对卖家来说有许多好处&#xff0c;它们可以帮助卖家增加产品曝光、提高销售量&#xff0c;并改善他们在亚马逊平台上的竞争地位。以下是一些卖家可能从亚马逊点击广告中获益的好处&#xff1a; 1、增加产品曝光度&#xff1a;通过在关键搜索结果页面上投放广告&…