知识点整理
程序员文章站
2022-07-12 10:18:39
...
背景拓展
- background-size:背景图的尺寸大小
- cover:覆盖
- contain：包含
覆盖：
将图片等比放大直至充满整个容器,超出部分将被剪裁掉
包含：将图片等比放大，直至宽度 或高度到边界，图片完全被包含在内。
- background-origin:背景图的填充位置
- padding-box(默认)
- border-box
- content-box
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
- background-clip:背景图的裁剪方式
- padding-box
- border-box(默认)
- content-box
注：复合样式第一个是位置，第二个是裁剪。
渐变
-
线性渐变 -> linear-gradient是值，需要添加到background-image属性上,渐变方向默认是从上往下（通过加to top/right等可以改变其方向）
linear-gradient : 线性渐变
point || angle
color
percentage注：渐变的0度是在页面在下边，正值会按照顺时针旋转，负值按逆时针旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
<style>
div {
width: 100px;
height: 100px;
background-image: linear-gradient(to top,red, blue, yellow, green);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-image:
linear-gradient(45deg, red, blue, yellow, green);
background-image:
linear-gradient(red 25%, blue 75%);
注：中间为渐变，在一个容器添加两种颜色设置50%即可。
2. 径向渐变 -> radial-gradient （较少用）
radial-gradient : 径向渐变
point
color
percentage
background-image:
radial-gradient(red 25%, blue 75%);
- 进度条模拟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变进度条</title>
<style>
.progress {
width: 300px;
height: 30px;
border: 1px solid black;
margin: 100px;
background-image: linear-gradient(to right top, #999 25%, green 25%, green 50%, #999 50%, #999 75%, green 75%);
background-size: 30px;
animation: move infinite 5s linear;
}
@keyframes move {
0% {
background-position: 0, 0;
}
100% {
background-position: 300px 0;
}
}
</style>
</head>
<body>
<div class="progress"></div>
</body>
</html>
效果：
字体图标
font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
-
好处：
1.可以非常方便的改变大小和颜色
font-size color
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端工程师的工作量
6.可使用计算机没有提供的字体 -
使用：
@font-face语法像.woff等文件都是做兼容平台处理的, mac、linux等。
上一篇： 嵌入式系统概述
下一篇： {转}卡尔曼滤波C语言实现