CSS3简介
CSS3新增长度单位
举例
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<!-- 让IE浏览器处于一个最优的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对一些国产的“双核”浏览器的设置，让浏览器优先使用webkit内核去渲染网页 -->
<meta name="render" content="webkit">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: deepskyblue;
}
.box2 {
width: 20vw;
height: 20vh;
background-color: green;
}
.box3 {
width: 20vmax;
height: 20vmax;
background-color: orange;
}
</style>
</head>
<body>
<div class="box1">像素</div>
<div class="box2">vw和vh</div>
<div class="box3">vmax</div>
</body>
</html>结果
举例
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 400px;
height: 400px;
background-color: orange;
resize: both;
overflow: scroll;
}
.box2{
width: 800px;
height: 600px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">123</div>
</div>
</body>
</html>结果
CSS3新增盒子属性
举例
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
font-size: 40px;
opacity: 0.1;
font-weight: bold;
}
.box2{
position: relative;
}
h1{
position: absolute;
top: 0;
left: 0;
background-color: black;
color: white;
width: 80%;
line-height: 100px;
text-align: center;
font-size: 40px;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="box1">你好啊</div>
<div class="box2">
<img src="/哪吒.jpg" alt="">
<h1>哪吒</h1>
</div>
</body>
</html>结果
举例
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
margin-top: 100px;
font-size: 40px;
/* box-shadow: 10px 10px; */
/* 写三个值，含义：水平位置 垂直位置 阴影的颜色 */
/* box-shadow: 10px 10px blue; */
/* 写三个值，含义：水平位置 垂直位置 模糊程度 */
/* box-shadow: 10px 10px 20px; */
/* 写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色 */
/* box-shadow: 10px 10px 20px blue; */
/* 写五个值，含义：水平位置 垂直位置 模糊程度 外延 阴影颜色 */
/* box-shadow: -10px -10px 20px 10px blue; */
/* 写六个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 */
/* box-shadow: 10px 10px 20px 10px blue inset; */
position: relative;
top: 0;
left: 0;
/* 用1s的时间完成阴影出现效果 */
transition: 1s linear all;
}
.box1:hover{
box-shadow: 0px 0px 20px black;
top: -1px;
left: 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>结果
CSS3新增背景属性
举例
结果
CSS3新增边框属性
CSS3新增文本属性
CSS3新增渐变
1.线性渐变
- 多个颜色之间的渐变， 默认从上到下渐变
background-image: linear-gradient(red,yellow,green);- 使用关键词设置线性渐变的方向。
background-image: linear-gradient(to top,red,yellow,green); background-image: linear-gradient(to right top,red,yellow,green);- 使用角度设置线性渐变的方向。
background-image: linear-gradient(30deg,red,yellow,green);- 调整开始渐变的位置。
background-image: linear-gradient(red 50px,yellow 100px ,green 150px);
2.径向渐变
多个颜色之间的渐变， 默认从圆心四散。（注意：不一定是正圆，要看容器本身宽高比）
- 使用关键词调整渐变圆的圆心位置。
background-image: radial-gradient(at right top,red,yellow,green);- 使用像素值调整渐变圆的圆心位置。
background-image: radial-gradient(at 100px 50px,red,yellow,green);- 调整渐变形状为正圆 。
background-image: radial-gradient(circle,red,yellow,green);- 调整形状的半径 。
background-image: radial-gradient(100px,red,yellow,green); background-image: radial-gradient(50px 100px,red,yellow,green);- 调整开始渐变的位置。
background-image: radial-gradient(red 50px,yellow 100px,green 150px);- 3.重复渐变
无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。
CSS3web字体-字体图标
