一、盒阴影
css3中的 box-shadow 属性被用来添加阴影。
box-shadow：水平位置 垂直位置 模糊距离 阴影尺寸(阴影大小) 阴影颜色 内/外阴影(前两个值必须写，模糊值不能为负。)
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.div-0 {
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid red;
box-shadow: 10px 10px 5px #888888;
margin: 20px;
}
</style>
</head>
<body>
<div class="div-0"></div>
</body>
</html>
效果：
二、边界图片
有了CSS3的border-image属性，你可以使用图像创建一个边框。取值:
- border-image-source :边框背景图片路径
- border-image-slice:图片边框向内偏移(切片)
- border-image-width:图片边框的宽度
- border-image-outset:边框图像区域超出边框的量
- border-image-repeat:图片边框是否应该平铺(repeat)/铺满(round)/拉伸(stretch)(针对切片图像)用于创建边框的原始图像。
transparent：给元素设置透明的边框。
border-image: url()：设置边框图片
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.div-3 {
width: 300px;
height: 200px;
border: 15px solid transparent;
border-image: url(img/border.png) 27 27 round;
}
.div-4 {
width: 300px;
height: 200px;
border: 15px solid transparent;
border-image: url(img/border.png) 27 27 repeat;
}
.div-5 {
width: 300px;
height: 200px;
/* 给元素设置透明的边框
transparent
*/
border: 15px solid transparent;
/* 设置边框图片 */
border-image: url(img/border.png) 27 27 stretch;
}
</style>
</head>
<body>
<div class="div-3"></div>
<div class="div-4"></div>
<div class="div-5"></div>
</body>
</html>
效果：
三、指定每一个圆角
CSS拥有用于为元素的每个角指定圆角的属性:
- border-radius: 15px 50px 30px 5px;:左上角为15px，右上角为50px，右下角为30px，左下角为5px。
- border-radius: 15px 50px 30px;:左上角为15px，右上角和左下角为50px，右下角为30px。border-radius: 15px 50px; :左上角和右下角为15px，右上角和左下角为50px。
- border-radius: 15px;:四个角都是15p×。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.div-1 {
width: 100px;
height: 100px;
border: 1px solid red;
background: yellow;
/* 圆 */
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.div-2 {
width: 100px;
height: 100px;
/* border: 5px solid red; */
background-color: aquamarine;
border-radius: 50%;
/* 同时给元素设置内外阴影 */
box-shadow: 30px 10px 5px rgba(247, 245, 245, 0.482) inset, 7px 5px 5px rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
</style>
</head>
<body>
<div class="div-1"></div>
<div class="div-2"></div>
</body>
</html>
效果：
四、背景
cSS3中包含几个新的背景属性，提供更大背景元素控制。.
1. background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.div-6 {
width: 500px;
height: 500px;
border: 1px solid red;
background-image: url(img/flower.gif), url(img/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
margin: 20px;
}
</style>
</head>
<body>
<div class="div-6">
<p>今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
</p>
<p>今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
</p>
<p>今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
</p>
</div>
</body>
</html>
效果：
2. background-origin属性
background-origin属性指定了背景图像的位置区域
content-box、padding-box和border-box区域内可以放置背景图像。
在content-box中定位背景图片:
3. background-sze属性
- background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。
- CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。你可以指定像素或百分比大小。
- 你指定的大小是相对于父元素的宽度和高度的百分比的大小。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.div-7 {
width: 500px;
height: 500px;
border: 1px solid red;
background: url(img/flower.gif) no-repeat;
/* cover,contain 注意这两个值的区别 */
background-size: contain;
}
</style>
</head>
<body>
<div class="div-7">
<p>今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
</p>
<p>今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
</p>
<p>今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好 今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好今天天气真好
</p>
</div>
</body>
</html>
效果：
五、过度
cSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容:
- 指定要添加效果的CSS属性
- 指定效果的持续时间。实例:
1.transition 属性是一个简写属性，用于设置四个过渡属：
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。
如果未指定的期限,transition将没有任何效果，因为默认值是O。
定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时开始变化。
多项变化：要添加多个样式的变化效果，添加的属性由逗号分隔。
2. transition-property 属性：
| 值 |
描述 |
| none |
没有属性会获得过渡效果。 |
| all |
所有属性都将获得过渡效果。 |
| property |
定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 |
3. transition-duration 属性：
time：规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
4. transition-timing-function 属性：
| 值 |
描述 |
| linear |
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease |
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in |
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out |
规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out |
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) |
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
5. transition-delay 属性：
time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。
案例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div-1 {
width: 300px;
height: 300px;
background-color: antiquewhite;
border-radius: 50%;
transition: all 3s;
transition-timing-function: steps(3);
}
.div-1:hover {
background-color: blue;
height: 400px;
width: 400px;
}
</style>
</head>
<body>
<div class="div-1"></div>
</body>
</html>
效果1：
案例2：动态时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clock {
width: 284px;
height: 284px;
border-radius: 50%;
position: relative;
background-image: url(img/clock.png);
}
.clock::before {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.clock::after {
content: '';
width: 2px;
height: 30%;
background-color: black;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%);
transform-origin: bottom;
transition-duration: 60s;
transition-timing-function: steps(60, start);
}
.clock:hover::after {
transform: translate(-50%) rotate(360deg);
}
</style>
</head>
<body>
<div class="clock"></div>
</body>
</html>
效果：
六、动画
cSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和JavaScript 实现的效果。
1. 什么是CSS动画?
动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的CSS属性。如需使用CSS动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。
2. @keyframes规则
如果你在@keyframes规则中指定了CSS样式，动画将在特定时间逐渐从当前样式更改为新样式要使动画生效，必须将动画绑定到某个元素。
3.指定动画的填充模式
CSS动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fil1-mode属性能够覆盖这种行为。
在不播放动画时（在开始之前，结束之后，或两者都结束时)，animation-fll-mode属性规定目标元素的样式。
animation-fill-mode属性可接受以下值:
- none -默认值。动画在执行之前或之后不会对元素应用任何样式。
- forwJrds -元素将保留由最后一个关键帧设置的样式值（依赖animation-direction和animation-iteration-count)。
- backwards -元素将获取由第一个关键帧设置的样式值（取决于animation-direction)，并在动画延迟期间保留该值。
- - both-动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
4. 反向或交替运行动画
- animation-direction属性指定是向前播放、向后播放还是交替播放动画。
- animation-direction属性可接受以下值:
- normal-动画正常播放(向前)。默认值
- reverse-动画以反方向播放(向后)
- alternate-动画先向前播放，然后向后工
- . alternate-reverse-动画先向后播放，然后向前
5. 延迟动画：
animation-delay属性规定动画开始的延迟时间。
负值也是允许的。如果使用负值，则动画将开始播放，如同已播放N秒。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div-1 {
width: 300px;
height: 300px;
background-color: antiquewhite;
border-radius: 50%;
/* 应用动画 */
/*指定动画的名称*/
animation-name: div_animate;
/*动画的持续时间*/
animation-duration: 4s;
/*动画填充模式，forwards的作用是将动画的样式停留在最后一个*/
animation-fill-mode: forwards;
/*animation-delay:动画延迟的时间，当值为负数时表示动画已经执行了多长时间*/
animation-delay: 2s;
animation-direction: alternate;
/**/
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.97, .08, .35, .72);
}
@keyframes div_animate {
from {
/* background-color: antiquewhite; */
margin-left: 0;
}
to {
/* background-color: blue; */
margin-left: 500px;
}
/* 25% {
background-color: red;
}
50% {
background-color: rebeccapurple;
}
75% {
background-color: green;
}
100% {
background-color: blue;
} */
}
</style>
</head>
<body>
<div class="div-1"></div>
</body>
</html>
效果：
提供CDN加速