171-178CSS3新增
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字体-字体图标
