本文深入探讨了CSS3中的关键概念，包括如何使用overflow属性控制内容溢出，浮动元素（float）对布局的影响，以及如何创建圆角、阴影和各种类型的渐变。此外，还介绍了background-clip、background-origin和background-size属性，以及CSS3的2D和3D转换、过渡和动画效果，展示了如何为网页设计增添动态和视觉吸引力。
CSS 布局 - Overflow
可以控制内容溢出元素框时在对应的元素区间内添加滚动条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overflow</title>
<style>
#Overflow{
background-color: aqua;
width: 200px;
height: 50px;
border:1px dotted biack;
overflow: auto;
}
</style>
</head>
<body>
<!-- visible,hidden,scroll,auto,inherit -->
<div id="Overflow">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>
</body>
</html>
CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
元素怎样浮动
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Float</title>
<style type="text/css">
img{
float: right;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个 <b>float:right</b> 的图片。
导致图片将会浮动在段落的右边。</p>
<img src="imgs/avatar5.png" />
<p>这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。</p>
</body>
</html>
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
在这里，我们对图片廊使用 float 属性：
清除浮动 - 使用 clear
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
float:left;
margin: 5px;
}
.clear1{
clear: both;
margin-bottom: 2px;
}
</style>
</head>
<body>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么</p>
<img src="imgs/avatar.png">
<img src="imgs/avatar2.png">
<img src="imgs/avatar3.png">
<img src="imgs/avatar04.png">
<h3 class="clear1">第二行</h3>
<img src="imgs/avatar5.png">
<img src="imgs/avatar.png">
<img src="imgs/avatar.png">
<img src="imgs/avatar2.png">
<img src="imgs/avatar3.png">
</body>
</html>
1.CSS3是什么?
CSS3 是最新的 CSS 标准。
CSS3 已完全向后兼容，所以你就不必改变现有的样式设计。
增加了新的一些最重要 CSS3 模块如下：
选择器
盒模型
背景和边框
文字特效
2D/3D转换
动画
多列布局
用户界面
W3C 的 CSS3 规范仍在开发。但是，现在新的浏览器已经都支持 CSS3 属性。
CSS3 圆角
使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> CSS3 border-radius 属性</title>
<style>
#radius1{
border-radius: 25px;
background-color: aquamarine;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2{
border-radius: 25px;
background-color:yellow;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3{
border-radius: 25px;
background: url(imgs/timg.jpg);
background-position:left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>border-radius 属性允许向元素添加圆角。</p>
<p>指定背景颜色元素的圆角</p>
<p id="radius1">圆角</p>
<p>指定边框元素的圆角</p>
<p id="radius2">圆角</p>
<p>指定背景图片元素的圆角</p>
<p id="radius3">圆角</p>
</body>
</html>
CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> border-radius - 指定每个圆角</title>
<style>
#radius1{
border-radius: 15px 50px 30px 5px;
background-color: red;
padding: 20px;
width: 200px;
height: 150px;
}
#radius2{
border-radius: 15px 50px 30px;
background-color: yellow;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3{
border-radius: 15px 50px;
background-color: aqua;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>四个值 - border-radius: 15px 50px 30px 5px:</p>
<p id="radius1"></p>
<p>三个值 - border-radius: 15px 50px 30px:</p>
<p id="radius2"></p>
<p>两个值 - border-radius: 15px 50px</p>
<p id="radius3"></p>
</body>
</html>
还可以创建椭圆边角:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radius椭圆边角</title>
<style>
#radius1{
border-radius: 50px 15px;
background-color: red;
padding: 20px;
width: 200px;
height: 200px;
}
#radius2{
border-radius: 15px 50px;
background-color: red;
padding: 20px;
width: 200px;
height: 150px;
}
#radius3{
border-radius: 50px ;
background-color: red;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<p>椭圆边框border-radius: 50px/15px</p>
<p id="radius1"></p>
<p>椭圆边框 - border-radius: 15px/50px:</p>
<p id="radius2"></p>
<p>椭圆边框 - border-radius: 50%</p>
<p id="radius3"></p>
</body>
</html>
CSS3 圆角属性
CSS3 盒阴影
CSS3 中的 box-shadow 属性被用来添加阴影:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 盒阴影</title>
<style>
div{
width: 300px;
height: 100px;
background-color: red;
box-shadow: 10px 10px 5px aquamarine;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 background-clip 属性
background-clip属性指定背景绘制区域。
语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 background-clip 属性</title>
<style>
#border{
width: 200px;
border:10px dotted black;
padding: 35px;
background-color: yellow;
}
#padding{
width: 200px;
border:10px dotted black;
padding: 35px;
background-color: yellow;
background-clip: padding-box;
}
#content{
width: 200px;
border:10px dotted black;
padding: 35px;
background-color: yellow;
background-clip: content-box;
}
</style>
</head>
<body>
<p>border-box</p>
<div id="border">
<p>默认值。背景绘制在边框方框内（剪切成边框方框）</p>
</div>
<p>padding-box</p>
<div id="padding">
<p>背景绘制在衬距方框内（剪切成衬距方框）。</p>
</div>
<p>content-box</p>
<div id="content">
<p>背景绘制在内容方框内（剪切成内容方框）。</p>
</div>
</body>
</html>
CSS3 background-origin 属性
background-Origin属性指定background-position属性应该是相对位置。
注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。
语法
CSS3 background-size 属性
background-size属性指定背景图片大小。
语法
background-size: length|percentage|cover|contain;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size 属性</title>
<style>
body{
background:url(imgs/avatar5.PNG);
background-size: 150px 200px;
background-repeat: no-repeat;
padding-top: 250px;
}
</style>
</head>
<body>
<p>原始图片:<img src="imgs/avatar5.PNG" width="200px" height="
150px"</p>
</body>
</html>
CSS3 渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 渐变（Gradients）</title>
<style>
#div1{
height: 200px;
background-color: red;
background-image: linear-gradient(red, blue);
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色</p>
<div id="div1"></div>
</body>
</html>
径向渐变（Radial Gradients）- 由它们的中心定义
CSS3 线性渐变
为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。
线性渐变的实例：
语法
background-image: linear-gradient(direction, color-stop1, color-stop2, …);线性渐变 - 从上到下（默认情况下）
线性渐变 - 对角
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradients</title>
<style>
#div1{
width: 500px;
height: 400px;
/* background-image: linear-gradient(to right,red,yellow); */
/* 从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色 */
background-image: linear-gradient(to bottom right,red,yellow)
}
</style>
</head>
<body>
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色</p>
<div id="div1"></div>
</body>
</html>
使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。
语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
角度是指水平线和渐变线之间的角度，逆时针方向计算。
换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用角度</title>
<style>
#div1{
height: 100px;
background-image: linear-gradient(0deg,red,yellow);
}
#div2{
height: 100px;
background-image: linear-gradient(90deg,red,yellow);
}
#div3{
height: 100px;
background-image: linear-gradient(180deg,red,yellow);
}
#div4{
height: 100px;
background-image: linear-gradient(-90deg,red,yellow);
}
</style>
</head>
<body>
<h3>线性渐变 - 使用不同的角度</h3>
<div id="div1" style="text-align: center;">0deg</div> <br>
<div id="div2" style="text-align: center;">90deg</div> <br>
<div id="div3" style="text-align: center;">180deg</div> <br>
<div id="div4" style="text-align: center;">-90deg</div>
</body>
</html>
使用多个颜色节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用多个颜色节点</title>
<style>
#div1{
height: 100px;
background-image: linear-gradient(to right,red,orange,yellow,green,blue, indigo, violet);
}
</style>
</head>
<body>
<div id="div1" style="text-align: center;margin: auto;color: white;font-size: 40px;font-weight: bold;" >
渐变背景
</div>
</body>
</html>
使用透明度（transparent）
CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。
为了添加透明度，我们使用 rgba() 函数来定义颜色节点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用透明度（transparent）</title>
<style>
#div1{
height: 200px;
background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>线性渐变 - 透明度</h3>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，
它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明</p>
<div id="div1"></div>
</body>
</html>
CSS3 径向渐变
径向渐变由它的中心定义。
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
语法
background-image: radial-gradient(shape size at position, start-color, …, last-color);
径向渐变 - 颜色节点均匀分布（默认情况下）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 径向渐变颜色节点均匀分布（默认情况下）</title>
<style>
#div1{
width: 300px;
height: 200px;
background-image: radial-gradient(red,green,blue);
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点均匀分布</h3>
<div id="div1"></div>
</body>
</html>
径向渐变 - 颜色节点不均匀分布
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>径向渐变 - 颜色节点不均匀分布</title>
<style>
#div1{
width: 300px;
height: 200px;
background-image: radial-gradient(red 10%,green 30%,blue 60%);
}
</style>
</head>
<body>
<h3>径向渐变 - 颜色结点不均匀分布</h3>
<div id="div1"></div>
</body>
</html>
设置形状
shape 参数定义了形状。
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shape 设置形状</title>
<style>
#div1 {
height: 150px;
width: 200px;
background-image: radial-gradient(red, yellow, green);
}
#div2 {
height: 150px;
width: 200px;
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h3>径向渐变 - 形状</h3>
<p><strong>椭圆形 Ellipse（默认）：</strong></p>
<div id="div1"></div>
<p><strong>圆形 Circle：</strong></p>
<div id="div2"></div>
</body>
</html>
不同尺寸大小关键字的使用
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 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 2D 转换</title>
<style>
div{
width: 100px;
height: 80px;
background-color: red;
border: 1px solid black;
}
#div1{
width: 100px;
height: 80px;
transform:translate(50px,100px);
}
#div2{
width: 100px;
height: 80px;
transform:rotate(45deg);
}
#div3{
width: 100px;
height: 80px;
transform:scale(2,2);
}
#div4{
width: 100px;
height: 80px;
transform:skew(45deg,30deg);
}
#div5{
width: 100px;
height: 80px;
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
</style>
</head>
<body>
<div></div>
<div id="div1">translate()平移</div> <br>
<div id="div2">rotate()旋转</div> <br>
<div id="div3">scale()缩放</div> <br>
<div id="div4">skew()倾斜。</div> <br>
<div id="div5">matrix()合并成一个，同时实现平移，旋转，缩放，倾斜。</div>
</body>
</html>
CSS3 3D 转换
3D 转换方法：
rotateX()–围绕其在一个给定度数X轴旋转的元素。
rotateY()–围绕其在一个给定度数Y轴旋转的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 3D 转换</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
}
#div1{
width: 200px;
height: 200px;
transform:rotateX(125deg);
}
#div2{
width: 200px;
height: 200px;
transform:rotateY(45deg);
}
</style>
</head>
<body>
<div></div> <br>
<div id="div1">
<h3>rotateX()--围绕其在一个给定度数X轴旋转的元素。</h3>
</div>
<div id="div2"> <br>
<h3>rotateY()--围绕其在一个给定度数Y轴旋转的元素。</h3>
</div>
</body>
</html>
CSS3 过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
1、指定要添加效果的CSS属性
2、指定效果的持续时间。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 过渡</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
transition: width 5s,height 5s,transform 2s;
}
div:hover{
height: 300px;
width: 300px;
transform:translate(50px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 动画
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3 @keyframes 规则
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 动画 @keyframes</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
animation:myfirst1 5S;
}
@keyframes myfirst{
from{
transform:translate(0px,0px);
transform:rotate(0deg);
transform:scale(0,0);
transform:skew(0deg,0deg);
}
to{
transform:translate(50px,100px);
transform:rotate(180deg);
transform:scale(2,2);
transform:skew(45deg,30deg);
}
}
@keyframes myfirst1{
from{
transform:rotateX(0deg);
}
to{
transform:rotateX(360deg);
}
@keyframes myfirst2{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS3 动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
1.规定动画的名称
2.规定动画的时长
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 动画</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
animation:myfirst 10S;
}
@keyframes myfirst{
0% {background:red; }
25% {background:yellow; }
50% {transform:rotate(0deg);}
75% {background:pink;}
100% {background:red; }
}
@keyframes myfirst{
0% {background:red; }
25% {background:yellow; }
50% {transform: rotate(360deg);}
75% {background:pink }
100% {background:red; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>
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 多媒体类型
366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
