2021.5.15 CSS3学习第二天-白红宇

2021.5.15 CSS3学习第二天

阅读量：2147 次

发布时间：2019-04-30

本文共 6399 字，大约阅读时间需要 21 分钟。

CSS 布局 - Overflow

可以控制内容溢出元素框时在对应的元素区间内添加滚动条

在这里插入图片描述

			
   		Overflow						
   		
   		
    这里的文本内容会溢出元素框。
		
    这里的文本内容会溢出元素框。
		
    这里的文本内容会溢出元素框。

CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

Float

在下面的段落中，我们添加了一个 float:right 的图片。导致图片将会浮动在段落的右边。

这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。

在这里插入图片描述

彼此相邻的浮动元素

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

在这里，我们对图片廊使用 float 属性：

清除浮动 - 使用 clear

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

试着调整窗口,看看当图片没有足够的空间会发生什么

第二行

1.CSS3是什么?

CSS3 是最新的 CSS 标准。

CSS3 已完全向后兼容，所以你就不必改变现有的样式设计。

增加了新的一些最重要 CSS3 模块如下：

选择器

盒模型

背景和边框

文字特效

2D/3D转换

动画

多列布局

用户界面

W3C 的 CSS3 规范仍在开发。但是，现在新的浏览器已经都支持 CSS3 属性。

CSS3 圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。

CSS3 border-radius 属性

border-radius 属性允许向元素添加圆角。

指定背景颜色元素的圆角

圆角

指定边框元素的圆角

圆角

指定背景图片元素的圆角

圆角

在这里插入图片描述

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个圆角值相同

border-radius - 指定每个圆角

四个值 - border-radius: 15px 50px 30px 5px:

三个值 - border-radius: 15px 50px 30px:

两个值 - border-radius: 15px 50px

在这里插入图片描述

还可以创建椭圆边角:

radius椭圆边角

椭圆边框border-radius: 50px/15px

椭圆边框 - border-radius: 15px/50px:

椭圆边框 - border-radius: 50%

在这里插入图片描述

CSS3 圆角属性

在这里插入图片描述

CSS3 盒阴影

CSS3 中的 box-shadow 属性被用来添加阴影:

			
   		CSS3 盒阴影

在这里插入图片描述

CSS3 background-clip 属性

background-clip属性指定背景绘制区域。

语法

在这里插入图片描述

CSS3 background-clip 属性

border-box

默认值。背景绘制在边框方框内（剪切成边框方框）

padding-box

背景绘制在衬距方框内（剪切成衬距方框）。

content-box

背景绘制在内容方框内（剪切成内容方框）。

在这里插入图片描述

CSS3 background-origin 属性

background-Origin属性指定background-position属性应该是相对位置。

注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

语法

在这里插入图片描述

CSS3 background-size 属性

background-size属性指定背景图片大小。

语法

background-size: length|percentage|cover|contain;

在这里插入图片描述

background-size 属性

原始图片:

在这里插入图片描述

CSS3 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

CSS3 渐变（Gradients）

线性渐变 - 从上到下

从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色

在这里插入图片描述

径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

线性渐变的实例：

语法

background-image: linear-gradient(direction, color-stop1, color-stop2, …);线性渐变 - 从上到下（默认情况下）

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

Gradients

线性渐变 - 从左到右

从左边开始的线性渐变。起点是红色，慢慢过渡到黄色

在这里插入图片描述

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。

换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

在这里插入图片描述

			
   		使用角度						线性渐变 - 使用不同的角度
		
   
    0deg
   
 
		
   
    90deg
   
 
		
   
    180deg
   
 
		
   
    -90deg

在这里插入图片描述

使用多个颜色节点

			
   		使用多个颜色节点					
   
    		渐变背景

在这里插入图片描述

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

使用透明度（transparent）

线性渐变 - 透明度

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明

在这里插入图片描述

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

语法

background-image: radial-gradient(shape size at position, start-color, …, last-color);

径向渐变 - 颜色节点均匀分布（默认情况下）

			
   		CSS3 径向渐变颜色节点均匀分布（默认情况下）						径向渐变 - 颜色结点均匀分布

在这里插入图片描述 径向渐变 - 颜色节点不均匀分布

!DOCTYPE html>			
   		径向渐变 - 颜色节点不均匀分布						径向渐变 - 颜色结点不均匀分布

在这里插入图片描述

设置形状

shape 参数定义了形状。

它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

shape 设置形状

径向渐变 - 形状

椭圆形 Ellipse（默认）：

圆形 Circle：

在这里插入图片描述

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side farthest-side closest-corner farthest-corner

CSS3 2D 转换

CSS3 2D转换可以对元素进行移动、缩放、转动、拉长或拉伸。

了解2D变换的常用方法：

translate()–根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate()–在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale()–该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

skew()—该元素在X轴和Y轴上倾斜。

matrix()–将上面2D变换方法合并成一个，同时实现平移，旋转，缩放，倾斜

translate()–根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate()–在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale()–该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

skew()—该元素在X轴和Y轴上倾斜。

matrix()–将上面2D变换方法合并成一个，同时实现平移，旋转，缩放，倾斜

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

			
   		CSS3 2D 转换						
   
		
   
    translate()平移
   
 
		
   
    rotate()旋转
   
 
		
   
    scale()缩放
   
 
		
   
    skew()倾斜。
   
 
		
   
    matrix()合并成一个，同时实现平移，旋转，缩放，倾斜。

在这里插入图片描述

CSS3 3D 转换

3D 转换方法：

rotateX()–围绕其在一个给定度数X轴旋转的元素。

rotateY()–围绕其在一个给定度数Y轴旋转的元素。

			
   		CSS3 3D 转换						
   
 
		
   			
    rotateX()--围绕其在一个给定度数X轴旋转的元素。
		
   
		
    
    
			
    rotateY()--围绕其在一个给定度数Y轴旋转的元素。

在这里插入图片描述

CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

			
   		CSS3 过渡

在这里插入图片描述

CSS3 动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

CSS3 @keyframes 规则

要创建 CSS3 动画，你需要了解 @keyframes 规则。

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

			
   		CSS3 动画 @keyframes

CSS3 动画

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

1.规定动画的名称

2.规定动画的时长

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

			
   		CSS3 动画

CSS3 多媒体查询

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想：取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

viewport(视窗) 的宽度与高度

设备的宽度与高度

朝向 (智能手机横屏，竖屏) 。

分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

多媒体查询语法

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) { CSS 代码…; }

如果指定的多媒体类型匹配设备类型则查询结果返回 true，文档会在匹配的设备上显示指

定样式效果。除非你使用了 not 或 only 操作符，否则所有的样式会适应在所有设备上显示效果。

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。

only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

all: 所有设备，这个应该经常看到。

CSS3 多媒体类型

在这里插入图片描述