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

在这里插入图片描述

文章目录

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

CSS3概述

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

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-box widthheight 设置的是盒子内容区的大小(默认值)
border-box widthheight 设置的是盒子整个区域的总大小

拖拽调整盒子大小

使用 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 属性能为整个元素添加透明效果, 值是 01 之间的小数, 0 是完全透明, 1 表示完全不透明

【前段基础入门之】=>CSS3的新增特性!_第2张图片


新增背景属性

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的新增特性!_第3张图片


新增边框属性

边框圆角

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复合属性,设置文字描边宽度和颜色

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

你可能感兴趣的:(CSS,css3,前端,css)