【前段基础入门之】=＞CSS3的新增特性！

在这里插入图片描述

文章目录

  • CSS3概述
    • CSS3私有前缀
      • 常见浏览器私有前缀
  • 新增盒模型相关属性
    • 怪异盒模型
    • 拖拽调整盒子大小
    • 盒子阴影
    • 不透明度
  • 新增背景属性
    • background-origin
    • background-clip
    • background-size
    • 多背景图
    • backgorund 复合属性
  • 新增边框属性
    • 边框圆角
    • 边框外轮廓
  • 新增文本属性
    • 文本阴影
    • 文本换行
    • 文本溢出
    • 文本修饰
    • 文本描边

CSS3概述

  • CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
  • CSS3 计划在未来会按照模块化的方式去发展：查看官方文档
  • CSS3 的新特性如下:
    • 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等
    • 新增了更好的视觉效果，例如：圆角、阴影、渐变等
    • 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性
    • 新增了全新的布局方案 —— 弹性盒子
    • 新增了 Web 字体，可以显示用户电脑上没有安装的字体
    • 增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度
    • 增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等
    • 增加动画与过渡效果，让效果的变换更具流线性、平滑性
    • ……
      在这里插入图片描述

CSS3私有前缀

div {width: 400px;height: 400px;-webkit-border-radius: 20px;
}

例如代码中的 -webkit- 就是私有前缀；

其作用是：

W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS特性后，就不需要私有前缀了，简而言之就是为了支持CSS的新特性，所进行的兼容性处理

  • 查询 CSS3 兼容性的网站：点击查询CSS属性兼容性

常见浏览器私有前缀

  • Chrome 浏览器： -webkit
  • Safari 浏览器： -webkit
  • Firefox 浏览器： -moz
  • Edge 浏览器： -webkit
  • 旧 Opera 浏览器： -o
  • 旧 IE 浏览器： -ms

说明：
在这里插入图片描述

新增盒模型相关属性

怪异盒模型

使用 box-sizing 属性可以设置盒模型的两种类型

可选属性值描述
content-boxwidth 和 height 设置的是盒子内容区的大小（默认值）
border-boxwidth 和 height 设置的是盒子整个区域的总大小

拖拽调整盒子大小

使用 resize 属性可以控制是否允许用户拖拽调节元素尺寸；需搭配overflow属性开启

可选属性值描述
none 不允许用户调整元素大小。 (默认)
both用户可以调节元素的宽度和高度
horizontal只允许用户可以调节元素的水平宽度
vertical只允许用户可以调节元素的垂直高度

盒子阴影

使用 box-shadow 属性为盒子添加阴影

语法：

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

取值含义：

可选属性值描述
h-shadow水平阴影的位置，必须填写，可以为负值
v-shadow垂直阴影的位置，必须填写，可以为负值
blur 可选，模糊距离
spread 可选，阴影的外延值
color可选，阴影的颜色；默认黑色
inset可选，将外部阴影改为内部阴影
  • 默认值： box-shadow:none 表示没有阴影
/* 写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;

不透明度

opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明

在这里插入图片描述

新增背景属性

background-origin

作用：设置背景图的定位原点

语法：

  1. padding-box ：从 padding 区域开始显示背景图像。—— 默认值
  2. border-box ： 从 border 区域开始显示背景图像
  3. content-box ： 从 content 区域开始显示背景图像

background-clip

作用：设置背景图的向外裁剪的区域

语法：

  1. border-box ： 从 border 区域开始向外裁剪背景。 —— 默认值
  2. padding-box ： 从 padding 区域开始向外裁剪背景
  3. content-box ： 从 content 区域开始向外裁剪背景
  4. text ：背景图只呈现在文字上

在这里插入图片描述

background-size

作用：设置背景图的尺寸

语法：

  1. 用长度值指定背景图片大小，不允许负值
background-size: 300px 200px;
  1. 用百分比指定背景图片大小，不允许负值
background-size: 100% 100%;

  1. auto ： 背景图片的真实大小。 —— 默认值

  2. contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。

background-size: contain;
  1. cover ：将背景图片等比例缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择
background-size: cover;

多背景图

CSS3 允许元素设置多个背景图片

/* 添加多个背景图 */
background: url(../images/bg-lt.png) no-repeat,url(../images/bg-rt.png) no-repeat right top,url(../images/bg-lb.png) no-repeat left bottom,url(../images/bg-rb.png) no-repeat right bottom;

backgorund 复合属性

background: color url repeat position / size origin clip

在这里插入图片描述

新增边框属性

边框圆角

在 CSS3 中，使用 border-radius 属性可以将盒子变为圆角

  • 同时设置四个角的圆角
border-radius:10px;
  • 分开设置每个角的圆角
属性名描述
border-top-left-radius设置左上角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径
border-top-right-radius设置右上角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径
border-bottom-right-radius设置右下角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径
border-bottom-left-radius设置左下角圆角半径：
1. 一个值是正圆半径，
2. 两个值分别是椭圆的 x 半径、 y 半径

综合写法：

border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下y

边框外轮廓

  • outline-width ：外轮廓的宽度
  • outline-color ：外轮廓的颜色
  • outline-style ：外轮廓的风格
    • none： 无轮廓
    • dotted： 点状轮廓
    • dashed ： 虚线轮廓
    • solid ： 实线轮廓
    • double ： 双线轮廓
  • outline-offset 设置外轮廓与边框的距离，正负值都可以设置

在这里插入图片描述
outline 复合属性

outline:50px solid blue;

新增文本属性

文本阴影

在 CSS3 中，我们可以使用 text-shadow 属性给文本添加阴影

语法

text-shadow: h-shadow v-shadow blur color;
属性值描述
h-shadow必需写，水平阴影的位置。允许负值
v-shadow必需写，垂直阴影的位置。允许负值
blur可选，模糊的距离
color可选，阴影的颜色,默认黑色

文本换行

在 CSS3 中，我们可以使用 white-space 属性设置文本换行方式

  • 常用值如下：
属性值描述
normal文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值）
pre按代码原样输出，与 pre 标签的效果相同
pre-wrap在 pre 效果的基础上，超出元素边界自动换行
pre-line在 pre 效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
nowrap 强制不换行

文本溢出

在 CSS3 中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式

  • 常用值如下：
属性值描述
clip当内联内容溢出时，将溢出部分裁切掉。 （默认值）
ellipsis 当内联内容溢出块容器时，将溢出部分替换为 ...

在这里插入图片描述

文本修饰

CSS3 升级了 text-decoration 属性，让其变成了复合属性

text-decoration: text-decoration-line || text-decoration-style || text-decorationcolor
  • 子属性取值及其含义：

    • text-decoration-line：设置文本装饰线的位置

      • none ： 指定文字无装饰 （默认值）
      • underline ： 指定文字的装饰是下划线
      • overline ： 指定文字的装饰是上划线
      • line-through ： 指定文字的装饰是贯穿线

    • text-decoration-style ：文本装饰线条的形状

      • solid ： 实线 （默认）
      • double ： 双实线
      • dotted ： 点状线条
      • dashed ： 虚线
      • wavy ： 波浪线

    • text-decoration-color 文本装饰线条的颜色

文本描边

注意：文字描边功能仅 webkit 内核浏览器支持

  • -webkit-text-stroke-width ：设置文字描边的宽度，写长度值
  • -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值
  • -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

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

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

相关文章

NPM 常用命令（九）

NPM 常用命令（九）

目录 1、npm link 1.1 使用语法 1.2 描述 2、npm login 2.1 描述 3、npm logout 3.1 描述 4、npm ls 4.1 使用语法 4.2 描述 5、npm org 5.1 使用语法 5.2 示例： 6、npm outdated 6.1 使用语法 6.2 描述 6.3 示例 7、npm owner 7.1 使用语法 7.2…
阅读更多...
ipv6跟ipv4如何通讯

ipv6跟ipv4如何通讯

IPv6的128位地址通常写成8组，每组为四个十六进制数的形式。比如:AD80:0000:0000:0000:ABAA:0000:00C2:0002 是一个合法的IPv6地址。这个地址比较长，看起来不方便也不易于书写。零压缩法可以用来缩减其长度。如果几个连续段位的值都是0，那么这…
阅读更多...
免费 AI 代码生成器 Amazon CodeWhisperer 初体验

免费 AI 代码生成器 Amazon CodeWhisperer 初体验

文章作者：浪里行舟 简介 随着 ChatGPT 的到来，不由让很多程序员感到恐慌。虽然我们阻止不了 AI 时代到来，但是我们可以跟随 AI 的脚步，近期我发现了一个神仙 AI 代码生产工具 CodeWhisperer ，它是一项基于机器学习的服…
阅读更多...
众佰诚：抖音开网店新手怎么做才能做起来

众佰诚：抖音开网店新手怎么做才能做起来

抖音作为国内最热门的短视频平台，其商业价值也日渐凸显。许多商家和个体经营者开始在抖音上开设网店，以此为新的销售渠道。那么，对于新手来说，如何才能在抖音上成功运营网店呢? 首先，明确经营定位。每个电商平台都有其…
阅读更多...
小谈设计模式（16）—抽象工厂模式

小谈设计模式（16）—抽象工厂模式

小谈设计模式（16）—抽象工厂模式 专栏介绍专栏地址专栏介绍 抽象工厂模式结构抽象工厂（AbstractFactory）具体工厂（ConcreteFactory）抽象产品（AbstractProduct）具体产品（C…
阅读更多...
FPGA project : fifo_sum

FPGA project : fifo_sum

实验目标： col(列) 4 ；line(行) 5。相邻三行，按列求和。输出新的数据流。 实现方法： 通过rs232通信协议，输入数据流。第一行存进fifo1，第二行存进fifo2.当输入第三行第一个数据的时候，从fif…
阅读更多...
Verilog HDL阻塞赋值和非阻塞赋值笔记

Verilog HDL阻塞赋值和非阻塞赋值笔记

1. module test( input wire clk, input wire b, output reg a, output reg c ); always(posedge clk) begin ab; ca; end endmodule 上面的代码在vivado中综合后的电路为： 2. module test( input wire clk, input wire b, outp…
阅读更多...
offer突击训练营，给你一个offer的保障，求职跳槽的看过来！

offer突击训练营，给你一个offer的保障，求职跳槽的看过来！

大家好，我是枫哥，🌟阿里云技术专家、📝资深面试官、🌹Java跳蚤网课堂创始人。拥有多年一线研发经验，曾就职过科大讯飞、美团网、平安等公司。 目前组建的团队，专注Java技术分享&#xff0c…
阅读更多...
互联网Java工程师面试题·Memcached篇·第一弹

互联网Java工程师面试题·Memcached篇·第一弹

目录 1、Memcached 是什么，有什么作用？ 1.1 memcached 服务在企业集群架构中有哪些应用场景？ 1.1.1 作为数据库的前端缓存应用 1.1.2 作业集群的 session 会话共享存储 2、Memcached 服务分布式集群如何实现？ 3、Memcach…
阅读更多...
【Blender实景合成】会跳舞的神里绫华

【Blender实景合成】会跳舞的神里绫华

效果预览 本文将介绍Blender用于实景合成的工作流程。 先看效果： 神里绫华爬上了我的办公桌 模型和动作资源准备 角色模型 本次主要使用的是原神游戏中，神里绫华的角色模型，该模型米哈游在模之屋网站上进行开源。 下载地址：ht…
阅读更多...
1500*B. Zero Array（贪心数学找规律）

1500*B. Zero Array（贪心数学找规律）

Problem - 1201B - Codeforces 解析&#xff1a; 因为每次减少2&#xff0c;如果总和为奇数肯定无法实现。 特例&#xff0c;如果某个数大于其他所有数的总和&#xff0c;同样无法实现。 其他均可实现。 #include<bits/stdc.h> using namespace std; #define int long l…
阅读更多...
六、vpp 流表+负载均衡

六、vpp 流表+负载均衡

草稿&#xff01;&#xff01;&#xff01; vpp node其实就是三个部分 1、plugin init 2、set command 3、function 实现功能&#xff0c;比如这里的流表 今天我们再用VPP实现一个流表的功能 一、流表 1.1流表----plugin init VLIB_REGISTER_NODE 注册流表节点 // 注册流…
阅读更多...
在CSV文件读取时id读取之后成了‘锘縤d‘，该怎么修改

在CSV文件读取时id读取之后成了‘锘縤d‘，该怎么修改

问题描述 准备用python实现一个小想法&#xff0c;里边数据可能会有点多&#xff0c;也为了代码能成块展示&#xff0c;所以打算写一个读取文件的函数。此时考虑到python中可以直接将CSV格式文件读取成字典的形式&#xff0c;所以尝试了一下。但是中间出现了错误&#xff0c;第…
阅读更多...
软件测试|Python自动化测试实现的思路

软件测试|Python自动化测试实现的思路

Python自动化测试常用于Web应用、移动应用、桌面应用等的测试 Python自动化实现思路通常分为以下几步&#xff1a; 1. 确定自动化测试的范围和目标&#xff1a; 首先需要明确需要进行自动化测试的范围和目标&#xff0c;包括测试场景、测试用例、测试数据等。 2. 选择自动化…
阅读更多...
详解IDEA git 版本回滚

详解IDEA git 版本回滚

作者简介 目录 1.git分区 2.未commit&#xff0c;进行回滚 3.commit未push&#xff0c;进行回滚 3.1.undo commit 3.2.reset 4.已commit&push&#xff0c;进行回滚 1.git分区 git的版本回滚其实就是回滚不同的分区&#xff0c;所以在聊git回滚之前我们有必要简单了解…
阅读更多...
开源即时通讯IM框架 MobileIMSDK v6.4 发布

开源即时通讯IM框架 MobileIMSDK v6.4 发布

一、更新内容简介 本次更新为次要版本更新&#xff0c;进行了若干优化&#xff08;更新历史详见&#xff1a;码云 Release Notes、Github Release Notes&#xff09;。MobileIMSDK 可能是市面上唯一同时支持 UDPTCPWebSocket 三种协议的同类开源IM框架。 二、MobileIMSDK简介…
阅读更多...
基于风驱动优化的BP神经网络（分类应用） - 附代码

基于风驱动优化的BP神经网络（分类应用） - 附代码

基于风驱动优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于风驱动优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.风驱动优化BP神经网络3.1 BP神经网络参数设置3.2 风驱动算法应用 4.测试结果&#x…
阅读更多...
递归

递归

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;汉诺塔 &#x1f449;&…
阅读更多...
java 将字符串转为Base64格式与将Base64内容解析出来

java 将字符串转为Base64格式与将Base64内容解析出来

首先要引入依赖包 import java.nio.charset.StandardCharsets; import java.util.Base64;然后对应一下两个代码 将字符串转为Base64 Base64.getEncoder().encodeToString(需要转换的字符串.getBytes(StandardCharsets.UTF_8));将 Base64 字符串解析成原来的内容 byte[] deco…
阅读更多...
每日一题 901. 股票价格跨度（中等，单调栈）

每日一题 901. 股票价格跨度（中等，单调栈）

理解题目&#xff0c;对于第 i 天&#xff0c;要求的是前 i - 1 天所满足条件的跨度 思路&#xff1a; 暴力搜索的方式是&#xff0c;对于每一个第 i 天都遍历搜索 i - 1&#xff0c; i - 2&#xff0c;…&#xff0c;直到第 j 天大于当前价格优化&#xff0c;考虑哪里进行了…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023