CSS3新增

已于 2023-05-16 09:55:18 修改
阅读量292 收藏
点赞数
分类专栏： 全栈工程师的基本素养 # 前端开发 文章标签： css html 前端 css3
于 2023-03-23 08:32:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60306931/article/details/129721446
版权

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

文章目录

什么是 CSS3

  • CSS3是CSS（层叠样式表）技术的升级版本，
    于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，
    主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块

  • CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块
    浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，
    CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性
    但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂

渐进增强和优雅降级

  • 渐进增强（Progressive Enhancement）：
    一开始就针对低版本浏览器进行构建页面，完成基本的功能，
    然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验
    渐进增强相当于向上兼容

  • 优雅降级（Graceful Degradation）：
    一开始就构建站点的完整功能，然后针对浏览器测试和修复
    比如一开始使用 CSS3 的特性构建了一个应用
    然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览
    优雅降级相当于向下兼容

  • 区别
    优雅降级是从复杂的现状开始，并试图减少用户体验的供给

    而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

  • 降级（功能衰减）意味着往回看

  • 而渐进增强则意味着朝前看，同时保证其根基处于安全地带

CSS3 中的选择器

  1. 层级选择器
    使用大于号（>）表示 E ~ F
    子选择器 选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
    使用波浪线（+）表示 E + F
    相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
    使用波浪线（~）表示 E ~ F
    相邻选择器类似，选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

  2. 属性选择器
    E[attr]：只使用属性名，但没有确定任何属性值
    E[attr="value"]：指定属性名和属性值(值完整)
    E[attr~="value"]：指定属性名，并且具有属性值，
    此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词
    E[attr^="value"]：属性值是以value开头的(一部分也可以)
    E[attr$="value"]：属性值是以value结束的(一部分也可以)
    E[attr*="value"]：属性值中包含了value(一部分也可以)
    E[attr|="value"]：属性值是value或者以“value-”开头的值

  3. 结构伪类选择器
    (el):first-child 匹配属于任意元素的第一个子元素的 el 元素
    (el):first-of-type 选择父元素中的第一个 el 元素
    (el):last-child 选择所有 el 元素的最后一个子元素
    (el):last-of-type 选择父元素中最后一个 el 元素
    (el):empty 匹配没有子元素（包括文本节点）的 el 元素
    (el):nth-child(n) 选择所有 el 元素的父元素的第 n 个子元素
    (el):nth-of-type(n) 选择所有p元素第 n 个为 el 的子元素
    (el):nth-last-child(n) 选择所有 el 元素倒数的第 n 个子元素
    (el):nth-last-of-type(n) 选择所有p元素倒数的第 n 个为 el 的子元素
    odd even numN
    (el):only-child 选择所有仅有一个子元素，并且子元素是 el 元素
    (el):only-of-type 选择所有仅有一个子元素中为 el 的元素

  4. 否定伪类选择器
    :not(el) 选择所有 el 以外的元素

  5. 状态（表单元素）伪类选择器
    :focus 选择元素输入后具有焦点
    :enabled 匹配每个已启用的元素
    :disabled 匹配每个被禁用的元素
    :checked 匹配每个已被选中的 元素
    :required 选择有"required"属性指定的元素属性
    :optional 选择没有"required"的元素属性
    :read-only 选择只读属性的元素属性
    :read-write 选择没有只读属性的元素属性
    :valid 选择所有有效值的属性
    :invalid 在表单元素中的值是非法时设置指定样式
    :in-range 用于标签的值在指定区间值时显示的样式
    :out-of-range 选择指定范围以外的值的元素属性

  6. 目标伪类选择器
    E:target
    用来匹配文档中url中某个标志符的目标元素
    url中的标志通常会包含一个#，后面带有一个标志符名称

target 实现 tab 切换的案例

CSS3 中的背景

  • background-clip 规定背景的绘制区域
    content-box
    padding-box
    border-box

  • background-origin 规定背景图片的定位区域
    content-box
    padding-box
    border-box

  • background-size 规定背景图片的尺寸 !!!
    length 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
    percentage 第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
    cover 完全覆盖背景定位区域的最小尺寸
    contain 完全覆盖背景定位区域的最大尺寸

  • 多背景
    background:url(),url();

CSS3 中的边框

  • border-radius 设置 圆角边框
    每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。
    如果省略左下角，右上角是相同的
    如果省略右下角，左上角是相同的
    如果省略右上角，左上角是相同的

    border-radius: 1-4 length|% / 1-4 length|%;

    按顺时针的顺序，斜杠/左边是四个圆角的水平半径，右边是四个圆角的垂直半径
    但是通常我们很少写右边的参数，那就是默认右边等于左边的值
    div { border-radius:10px 20px 30px 40px/40px 30px 20px 10px }
    绘制网站 —— 直通车

  • border-image
    border-image-source 路径
    border-image-slice 图片边框向内偏移 没有单位 一个数值
    border-image-width 图像边界的宽度
    border-image-repeat 平铺(repeat)铺满(round)拉伸(stretch)
    border-image-outset 边框图像区域超出边框的量

border-image: source slice width outset repeat|initial|inherit;
  • box-shadow 设置一个或多个下拉阴影的框
    h-shadow 必需的。水平阴影的位置。允许负值
    v-shadow 必需的。垂直阴影的位置。允许负值
    blur 可选。模糊距离
    spread 可选。阴影的大小
    color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
    inset 可选。从外层的阴影（开始时）改变阴影内侧阴影
box-shadow: h-shadow v-shadow blur spread color inset;

多个

box-shadow: h-shadow v-shadow blur spread color inset，
 h-shadow v-shadow blur spread color inset;

/* 像素点阴影---- */

 filter: drop-shadow(4px 4px 1px #ccc);

CSS3 中的文本效果

  • text-shadow 向文本添加阴影
    h-shadow 必需。水平阴影的位置。允许负值
    v-shadow 必需。垂直阴影的位置。允许负值
    blur 可选。模糊的距离
    color 可选。阴影的颜色。参阅 CSS 颜色值
text-shadow: h-shadow v-shadow blur color;

  • word-break 规定非中日韩文本的换行规则

    normal 使用浏览器默认的换行规则
    break-all 允许在单词内换行
    keep-all 只能在半角空格或连字符处换行

word-break: normal|break-all|keep-all;

  • word-wrap 允许对长的不可分割的单词进行分割并换行到下一行

    normal 只在允许的断字点换行（浏览器保持默认处理）
    break-word 在长单词或 URL 地址内部进行换行

word-wrap: normal|break-word;
  • text-overflow 规定当文本溢出包含元素时发生的事情
    clip 修剪文本
    ellipsis 显示省略符号来代表被修剪的文本
    string 使用给定的字符串来代表被修剪的文本
text-overflow: clip|ellipsis|string;

CSS3 中的字体 @font-face

使用以前 CSS 的版本，网页设计师不得不使用用户计算机上已经安装的字体
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户
Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则

font-family 必需，规定字体的名称
src URL 必需，定义字体文件的 URL
font-stretch 可选，定义如何拉伸字体
font-style 可选，定义字体的样式
font-weight 可选，定义字体的粗细。
unicode-range 可选，定义字体支持的 UNICODE 字符范围

<style>
	@font-face
	{
	    font-family: myFirstFont;
	    src: url(sansation_light.woff);	/* IE9+ */
	}

	div
	{
	    font-family: myFirstFont;
	}
</style>

阿里巴巴矢量图标库 iconfont —— 直通车
选择class方式，按说明引入字体文件

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog

许小墨~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS：CSS3新增属性
01-08
CSS3新增属性 1、border-radius：圆角边框 border-radius:10px 20px 30px 40px; /*圆：值为半径*/ border-radius:10px 20px 30px 40px/20px 30px 40px 50px; /*椭圆*/ 2、box-sizing：改变盒模型的模式 box-sizing...
css3新增颜色表示方式分享
09-25
二、CSS3新增颜色表示方式 1. RGBA模式 在RGB基础上增加了Alpha通道，用于控制颜色的透明度。例如，rgba(255,0,0,0.5)表示半透明红色。这使得开发者可以创建具有透明效果的颜色，丰富了网页设计的视觉效果。 2. ...
CSS常用动画特效，CSS3新增背景CSS代码。颜色渐变，flex弹性布局
04-17
这里我们将深入探讨“CSS常用动画特效”、“CSS3新增背景CSS代码”、“颜色渐变”以及“flex弹性布局”这四个关键知识点。 首先，我们来看“CSS常用动画特效”。CSS3引入了`@keyframes`规则，允许开发者创建复杂的...
CSS3 新增选择器的实例
01-19
结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论...
最新！CSSCI（2023-2024）期刊目录公布！
2301_76900678的博客
07-19 410
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1329
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
DAY05 CSS
最新发布
adminstate的博客
07-20 730
CSS样式
Web前端-Web开发CSS基础7-网格
a15735748145a的博客
07-17 720
22. 在网格容器中，设置grid-template-areas: 'header header header header' 'left left right right' 'left left right right' 'footer footer footer footer'19. 在网格容器中，设置grid-template-areas: 'header header header' 'main main main' 'footer footer footer'grid-row-start: 2;
Web前端-Web开发CSS基础2-选择器
a15735748145a的博客
07-16 581
58. 按顺序，选中所有未访问过的类名为class1的标签、访问过的类名为class1的标签、鼠标悬停时的类名为class1的标签、按下不放时的类名为class1的标签；59. 按顺序，选中所有未访问过的id为happy的标签、访问过的id为happy的标签、鼠标悬停时的id为happy的标签、按下不放时的id为happy的标签；60. 按顺序，选中所有未访问过的id为sad的标签、访问过的id为sad的标签、鼠标悬停时的id为sad标签、按下不放时的id为sad的标签；
Html_Css问答集(11)
白话魔法师
07-16 846
html与css学习中的一些疑问，问答中轻松获取知识。
相对定位语法：css+xpath基础语法使用-定位页面元素
m0_69119792的博客
07-16 754
介绍css和xpath，设置相对定位的基础使用
css 屏幕四周报警提示
AS_JOPO的专栏
07-16 350
屏幕四周出现律动的红色边框，产生报警提示的效果。
如何利用 CSS 动画和过渡效果来增强用户交互体验？
xy520521的博客
07-16 164
动态交互效果：通过结合CSS动画和JavaScript，可以实现动态的交互效果。通过定义关键帧，在不同的时间点改变元素的样式，可以创建各种复杂的动画效果。过渡延迟与持续时间：通过调整CSS过渡的延迟和持续时间，可以实现不同的交互效果。延迟可以用来创建一定的悬停效果，持续时间可以用来控制过渡的速度。渐变过渡：使用CSS过渡属性，比如transition，来实现元素的平滑过渡效果。淡入淡出效果：使用CSS的opacity属性来实现元素的淡入淡出效果。可以通过改变元素的透明度来实现平滑的淡入淡出过渡效果。
编织文字的魔法：探索WebKit的CSS文本效果
2401_85341950的博客
07-19 528
WebKit，作为众多浏览器的核心引擎，支持一系列CSS文本效果，使开发者能够创造出引人注目的文本样式。本文将深入探讨WebKit对CSS文本效果的支持，并提供详细的解释和代码示例。请注意，本文提供了一个关于WebKit CSS文本效果的概述，包括代码示例和关键概念的解释。通过本文的介绍，你应该对WebKit的CSS文本效果有了基本的了解。通过本文，我们希望能够帮助开发者更好地利用WebKit的CSS文本效果，创造出更加丰富和吸引人的Web页面。通过媒体查询，可以为不同屏幕尺寸的设备应用不同的文本效果。
【SASS/SCSS（二）】模块化语法
weixin_57208584的博客
07-17 802
Sass中的模块化主要是指外部的scss、sass文件可以作为模块导入到其他文件中。如果一个自定义的sass、scss文件，仅作为库模块引入，那么我们的取名可以用，这样该文件不会自动去编译加载，而是仅会在被引用之后被编译。这样的文件我们称为Partial（代码片段）。如果在一个文件夹下（例如名为folder）定义 _index.scss 或者 _index.sass ，导入 folder（即直接导入文件夹名），其会自动解析文件夹中的index文件并导入。
css-01-如何实现“文本过长（文本在一行排），超出部分被省略号代替”
m0_64150479的博客
07-20 214
css效果：文本在一行排显示，超出的部分用省略号代替
JavaWeb-【2】CSS和JavaScript
m0_74044018的博客
07-16 738
前端全系列超详细笔记！！ 持续更新到全部完结
艺术与技术的交响曲：CSS绘图的艺术与实践
艾恩小灰灰的博客
07-17 400
近年来，随着CSS3的普及，开发者们开始探索CSS在图形绘制方面的潜力，用纯粹的代码创造出令人惊叹的视觉效果。CSS绘图不仅是一种技术，也是一种艺术形式，它要求开发者既要有深厚的CSS功底，也要具备一定的创造力和审美感。然而，我们也应认识到它的局限性，学会在适当的场景下选择最合适的绘图方法。CSS绘图，即利用CSS的特性来创建和控制页面上的形状、图案乃至动画，已经成为前端设计领域的一项独特技能。从简单的圆形和矩形，到复杂的几何图形和动态效果，CSS提供了丰富的工具箱，包括但不限于。属性塑造形状，再利用。
Web开发：图片九宫格与非九宫格动态切换效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-20 451
本文主要记录图片九宫格与非九宫格展示效果动态切换的实现过程；
css3新增颜色表达式
06-10
CSS3新增了一种颜色表达式，即rgba()，它与之前的颜色表示方式不同，可以在颜色值中加入透明度的值，范围从0到1，表示颜色的不透明度。例如，rgba(255, 0, 0, 0.5)表示红色，不透明度为50%。此外，CSS3还新增了hsla()颜色表达式，它与rgba()类似，但是使用的是色相、饱和度和亮度三个值来表示颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

许小墨~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值