知识点整理

最新推荐文章于 2022-07-06 15:15:46 发布

Silent Land

最新推荐文章于 2022-07-06 15:15:46 发布

阅读量517

点赞数

分类专栏： HTML+CSS css HTML

本文链接：https://blog.csdn.net/weixin_44757417/article/details/106472500

版权

css 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

HTML+CSS

12 篇文章 0 订阅

订阅专栏

背景拓展

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等。
参考博文