当前位置: 首页 > news >正文

尚硅谷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字体

相关文章:

尚硅谷css3笔记

目录 一、新增长度单位 二、新增盒子属性 1.border-box 怪异盒模型 2.resize 调整盒子大小 3.box-shadow 盒子阴影 案例&#xff1a;鼠标悬浮盒子上时&#xff0c;盒子有一个过度的阴影效果 三、新增背景属性 1.background-origin 设置背景图的原点 2.background-clip 设置背…...

ppt转pdf免费的工具哪个好用?免费PPT转换为PDF的方法分享

在我们的工作和学习中&#xff0c;将PPT文件转换为PDF格式对于分享和储存具有重要意义。PPT文件是一种常用的演示工具&#xff0c;用于展示和传达信息。然而&#xff0c;PPT文件在不同的平台和设备上可能存在格式兼容性的问题&#xff0c;而且文件大小较大&#xff0c;不方便共…...

IDEA常用工具配置

IDEA常用工具&配置 如果发现插件市场用不了&#xff0c;可以设置Http Proxy&#xff0c;在该界面上点击”Check connection“并输入的地址&#xff1a;https://plugins.jetbrains.com/ 。 一、常用插件 1、MybatisX Mybaits Plus插件&#xff0c;支持java与xml互转 2、F…...

hive--给表名和字段加注释

1.建表添加注释 CREATE EXTERNAL TABLE test(loc_province string comment 省份,loc_city string comment 城市,loc_district string comment 区,loc_street string comment 街道,)COMMENT 每日数据处理后的表 PARTITIONED BY (par_dt string) ROW FORMAT SERDEorg.apache.had…...

AutoSAR系列讲解(深入篇)13.4-Mcal Dio代码分析(上)

目录 一、文件结构 二、动态代码 1、arxml文件 2、Dio_Cfg.h 3、Dio_PBCfg.c 4、小结 考虑了一下,觉得还是有必要拿出一个代码来具体分析一下,所以我们以最简单的DIO来举例子。但是如果直接贴上源码,可能会有一些版权问题,...

基于Mybatis Plus的SQL输出拦截器。完美的输出打印 SQL 及执行时长、statement

我们需要想办法打印出完成的SQL&#xff0c;Mybatis为我们提供了 org.apache.ibatis.plugin.Interceptor接口&#xff0c;我们来实现该接口做一些打印SQL的工作 package org.springjmis.core.mp.plugins;import com.baomidou.mybatisplus.core.toolkit.CollectionUtils; impor…...

C++ STL list

✅<1>主页&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;C之 STL list介绍和模拟实现 ☂️<3>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<4>前言&#xff1a;上次我们详细的介绍了vector&#xff0c;今天我们继续来介绍…...

Django图书商城系统实战开发-实现订单管理

Django图书商城系统实战开发-实现订单管理 简介 在本教程中&#xff0c;我们将继续基于Django框架开发图书商城系统&#xff0c;这次的重点是实现订单管理功能。订单管理是一个电子商务系统中非常重要的部分&#xff0c;它涉及到用户下单、支付、发货以及订单状态的管理等方面…...

POJ 3421 X-factor Chains 埃氏筛法+质因子分解+DFS

一、思路 我们先用埃氏筛法&#xff0c;找出1048576范围内的素数&#xff0c;其实找出1024以内的就够了&#xff0c;但是1048576也不大&#xff0c;所以无所谓了。 然后把输入的数字不断的判断与每个素数是否整除&#xff0c;然后把输入的数变为很多个素数相乘的形式&#xf…...

【积水成渊】9 个CSS 伪元素

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcy…...

【002】学习笔记之typescript的【任意类型】

任意类型 顶级类型&#xff1a;any类型和 unknown 类型 any类型 声明变量的时候没有指定任意类型默认为any任意类型都可以赋值给any&#xff0c;不需要检查类型。也是他的弊端如果使用any 就失去了TS类型检测的作用 unknown 类型 TypeScript 3.0中引入的 unknown 类型也被认为…...

题目:2574.左右元素和的差值

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2574. 左右元素和的差值 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 按题目要求模拟即可。 解题代码&#xff1a; class Solution {public int[] leftRightDifference(int[] nums) {i…...

成集云 | 用友U8采购请购单同步钉钉 | 解决方案

源系统成集云目标系统 方案介绍 用友U8是中国用友集团开发和推出的一款企业级管理软件产品。具有丰富的功能模块&#xff0c;包括财务管理、采购管理、销售管理、库存管理、生产管理、人力资源管理、客户关系管理等&#xff0c;可根据企业的需求选择相应的模块进行集…...

爬虫的代理IP池写哪里了?

亲爱的程序员小伙伴们&#xff0c;想要提高爬虫效率和稳定性&#xff0c;组建一个强大的代理IP池是非常重要的一步&#xff01;今天我就来和你分享一下&#xff0c;代理IP池到底应该写在哪里&#xff0c;以及如何打造一个令人瞩目的代理IP池&#xff01;准备好了吗&#xff1f;…...

CSS变形与动画(三):animation帧动画详解(用法 + 四个例子)

文章目录 animation 帧动画使用定义例子1 字母例子2 水滴例子3 会动的边框例子4 旋转木马 animation 帧动画 定义好后作用于需要变化的标签上。 使用 animation-name 设置动画名称 animation-duration: 设置动画的持续时间 animation-timing-function 设置动画渐变速度 anim…...

Ubuntu发布java版本

1、连接服务器 2、进入目录 cd /usr/safety/app/3、上传jar文件 4、杀掉原java进程 1. 查看当前java进程 2. ps -ef|grep java 3. ycmachine:/usr/safety/app$ ps -ef|grep java root 430007 1 6 01:11 pts/0 00:02:45 /usr/local/java/jdk1.8.0_341/bin/j…...

Java反射机制是什么?

Java反射机制是 Java 语言的一个重要特性。 在学习 Java 反射机制前&#xff0c;大家应该先了解两个概念&#xff0c;编译期和运行期。 编译期是指把源码交给编译器编译成计算机可以执行的文件的过程。在 Java 中也就是把 Java 代码编成 class 文件的过程。编译期只是做了一些…...

legacy-peer-deps的作用

加入ui组件库&#xff0c;以element-ui为例子 安装命令&#xff1a; npm i element-ui -S 如果安装不上&#xff0c;是因为npm版本问题报错&#xff0c;那么就使用以下命令 npm i element-ui -S --legacy-peer-deps那么legacy-peer-deps的作用是&#xff1f; 它是用于绕过pee…...

卷积操作后特征图尺寸,感受野,参数量的计算

文章目录 1、输出特征图的尺寸大小2、感受野的计算3、卷积核的参数量 1、输出特征图的尺寸大小 如果包含空洞卷积&#xff0c;即扩张率dilation rate不为1时&#xff1a; 2、感受野的计算 例如&#xff0c;图像经过两个3*3&#xff0c;步长为2的卷积后感受野为&#xff1a; co…...

C/C++ 注意点补充

C/C 注意点补充 地址与指针函数缺省 地址与指针 p的值是a的地址值&#xff0c;p的类型是int*&#xff0c;p的值是十六进制表示的地址值 所以可以直接把地址值通过强制转换 转换为地址p 如上图&#xff01;&#xff01;&#xff01; int a10; int *p&a; printf("%#p\n&…...

Intel XE核显PyTorch环境搭建避坑指南

1. 为什么选择Intel XE核显跑PyTorch&#xff1f; 最近很多小伙伴都在问&#xff0c;用Intel XE核显跑PyTorch到底靠不靠谱&#xff1f;作为一个在AI领域摸爬滚打多年的老司机&#xff0c;我可以很负责任地告诉你&#xff1a;完全可行&#xff01;特别是对于预算有限的学生党&a…...

Bilibili-Evolved性能优化实战:突破60fps流畅播放全解析

Bilibili-Evolved性能优化实战&#xff1a;突破60fps流畅播放全解析 【免费下载链接】Bilibili-Evolved 强大的哔哩哔哩增强脚本 项目地址: https://gitcode.com/gh_mirrors/bi/Bilibili-Evolved Bilibili-Evolved作为强大的哔哩哔哩增强脚本&#xff0c;通过深度优化浏…...

Swiper动画进阶:手把手教你用Swiper Animate制作节日主题动画(2023最新版)

Swiper动画进阶&#xff1a;手把手教你用Swiper Animate制作节日主题动画&#xff08;2023最新版&#xff09; 当节日氛围遇上交互设计&#xff0c;如何让静态页面"活"起来&#xff1f;Swiper Animate作为Swiper生态中的动画引擎&#xff0c;能通过简单的类名配置实现…...

开源工具SMUDebugTool:系统优化与性能调优的终极解决方案

开源工具SMUDebugTool&#xff1a;系统优化与性能调优的终极解决方案 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https:/…...

Phi-4-mini-reasoning效果展示:Chainlit中实时显示推理耗时与token生成速率

Phi-4-mini-reasoning效果展示&#xff1a;Chainlit中实时显示推理耗时与token生成速率 1. 模型简介 Phi-4-mini-reasoning 是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理。作为Phi-4模型家族的一员&#xff0c;它特别强化了数学推理…...

Graphormer开源可部署意义:支撑国家AI for Science重大科技基础设施

Graphormer开源可部署意义&#xff1a;分子属性预测使用指南 1. 项目概述 Graphormer是一种基于纯Transformer架构的图神经网络模型&#xff0c;专门为分子图&#xff08;原子-键结构&#xff09;的全局结构建模与属性预测而设计。该模型在OGB、PCQM4M等分子基准测试中表现优…...

收藏!程序员转型AI大模型应用开发,必学四大核心技能(小白友好版)

当下AI大模型风口持续爆发&#xff0c;越来越多程序员想抓住机遇转型入局&#xff0c;但大多陷入“盲目跟风、无从下手、学了没用”的困境——其实&#xff0c;转型AI大模型应用开发无需急于求成&#xff0c;不用追求“面面俱到”&#xff0c;先吃透核心技能&#xff0c;搭建完…...

HOOI算法里的‘skip’参数到底在干嘛?深入TensorLy源码讲透Tucker分解迭代过程

HOOI算法中的skip参数机制解析&#xff1a;从数学原理到TensorLy实现 当你在实现高阶正交迭代&#xff08;HOOI&#xff09;算法进行Tucker分解时&#xff0c;是否曾被multi_mode_dot函数中那个神秘的skip参数困扰过&#xff1f;这个看似简单的参数背后&#xff0c;实际上隐藏着…...

GLM-4-9B-Chat-1M惊艳效果:复杂SQL代码库跨文件依赖关系可视化

GLM-4-9B-Chat-1M惊艳效果&#xff1a;复杂SQL代码库跨文件依赖关系可视化 1. 项目背景与核心价值 当你面对一个包含数百个SQL文件的大型数据仓库项目时&#xff0c;最头疼的问题是什么&#xff1f;我相信很多开发者和数据工程师都会说&#xff1a;理不清的表依赖关系。 传统…...

C++并发编程实战:std::atomic的exchange与compare_exchange操作到底怎么选?

C并发编程实战&#xff1a;std::atomic的exchange与compare_exchange操作到底怎么选&#xff1f; 在构建高性能并发系统时&#xff0c;开发者常面临一个关键抉择&#xff1a;当需要原子更新共享数据时&#xff0c;究竟该选择exchange、compare_exchange_weak还是compare_exchan…...