知识点整理

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

Silent Land

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

阅读量546

点赞数

分类专栏： HTML+CSS css HTML

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

版权

css 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

HTML+CSS

12 篇文章 0 订阅

订阅专栏

文字阴影

text-shadow

值	含义
x	水平阴影的位置。允许负值。如果是正的,则阴影在box的右侧，反之在左
y	垂直阴影的位置。允许赖值。同上，正下侧，负上侧
blur	可选。模糊距离。模糊半径,越大在边缘越模糊,只能为正数，或者设0,设0则不具有效果
color	color: 可选。阴影的颜色。(rgba: rgb颜色值吸不透明度)建议不要忽略
多阴影	可设置多个阴影效果以逗号隔开

<!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 {
            font-size: 50px;
            color: red;
            /* 文字阴影效果：向右偏移10px 向下偏移10px 模糊10px 阴影颜色（默认与文字样式相同）为blue 多个阴影效果逗号隔开*/
            text-shadow: 10px 10px 10px blue, -10px -10px 10px green;
        }
    </style>
</head>

<body>
    <div>
        Hello css3
    </div>
</body>

</html>

在这里插入图片描述

盒子阴影

box-shadow

值	含义
x	水平阴影的位置。允许负值。如果是正的,则阴影在box的右侧，反之在左
y	垂直阴影的位置。允许赖值。同上，正下侧，负上侧
blur	可选。模糊距离。模糊半径,越大在边缘越模糊,只能为正数，或者设0,设0则不具有效果
color	color: 可选。阴影的颜色。(rgba: rgb颜色值吸不透明度)建议不要忽略
spread	可选。阴影的尺寸。可选正负，正则表示投影面积越来越大，负则越来越小
inset	可选。将外部阴影(outset) 改为内部阴影。可不设,默认是外阴影
多阴影	可设置多个阴影效果以逗号隔开

<!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: 200px;
            height: 200px;
            background-color: #ccc;
            margin: 100px auto;

            /* x轴偏移 y轴偏移 模糊程度 阴影范围 阴影颜色（默认黑色） 内阴影*/
            box-shadow: 10px 10px 10px 10px blue inset;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

在这里插入图片描述

小米官网盒子阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网盒子阴影</title>
    <style>
        li {
            position: relative;
            top: 0;
            float: left;
            list-style: none;
            margin: 50px;
            cursor: pointer;
            transition: .5s;
            border-radius: 3px;
        }

        li:hover {
            top: -3px;
            box-shadow: 0px 5px 10px 3px #ccc;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <img src="./images/mi_1.png" alt="">
        </li>
        <li>
            <img src="./images/mi_2.png" alt="">
        </li>
    </ul>
</body>

</html>

在这里插入图片描述

遮罩

mask
url
repeat
x
y
w
h
多遮罩
参考博文

倒影

box-reflect

值	含义
above	倒影的位置在上面
below	倒影的位置在下面
left	倒影在左边
right	倒影在右边

ps:还可以设置距离、遮罩、渐变效果（只是针对透明度，不支持颜色渐变）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒影</title>
    <style>
        .box {
            margin: 100px auto;
            width: 300px;
            /* 倒影方向 间距 遮罩*/
            /* -webkit-box-reflect: above 20px url("./images/love.png"); */
            /* -webkit-box-reflect: below 20px url("./images/love.png"); */
            /* -webkit-box-reflect: left 20px url("./images/love.png"); */
            -webkit-box-reflect: right 20px url("./images/love.png");


        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/girl.jpg" alt="">
    </div>
</body>

</html>

在这里插入图片描述

模糊与计算

blur模糊
filter : blur()
. calc计算
四则运算

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            /* 模糊值越大越模糊 */
            filter: blur(10px);
        }

        .box {
            width: 600px;
            height: 300px;
            border: 1px solid red;
        }

        .box1 {
            height: 100px;
            width: calc(100% - 200px);
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <img src="./images/girl.jpg" alt="">
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

模糊和计算效果展示

分栏布局

column

值	含义
column-count :	分栏的个数
column-width	分栏的宽度
column-gap	分栏的间距
column-rule :	分栏的边线
column-span	合并分栏

注：column-width和column-count不要一起去设置。

<!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: 600px;
            height: 800px;
            margin: 100px auto;
            border: 1px solid #ccc;
            /* 分三栏 */
            /* column-count: 3;
             */
            /* 分栏宽度 */
            column-width: 100px;
            /* 分栏间距 */
            column-gap: 40px;
            /* 分栏边线 */
            column-rule: skyblue 1px dashed;

        }

        div h2 {
            /* 合并分栏 */
            column-span: all;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <h2>把培养工作能力，提高自身素质</h2>
        <p>一、实习过程中掌握好实习内容，培养好工作能力，显的尤为重要。半年里，我严格按照厂人事部下发的**实习大纲，认真研读，逐一学习，在思想行动上，努力做到
            想实习，会实习，实好习</p>
        <p> 作为己任，圆满的完成了本阶段实习任务。<br>　　一是加强思想学习，主动与矿领导沟通，努力提高思想水平。<br>　　思想是人的灵魂，是人的内在力，要想把实习任务完成好，首先要把思想调整好。领导十分重视大学生成长，为此特地为我们制定了
            双导师实习制度</p>
        <p>双导师，顾名思义，果的联系。因此，实习中，我们在重温课本上知识同时，将书本中的理论与实际生产部件相对应，将课上公式与实际生产数据相对应，这样不仅可以使理论知识记得更为牢固，还可以在本质上理解生产上各设备、器件的作用、原理，为今后工作中的技术革新，改进发明打下了良好的基础，极大的提高了实习质量。<br>　　三是热爱实习岗位，积极承担岗位职责，不断提升实习效率。<br>　　爱岗才能敬业
            ，热爱实习岗位才能完成好实习任务。在实习过程中，我努力培养自己对实习岗位的热情，珍惜在岗上的每一分钟，努力学习岗位上的相关知识，积极承担岗位上的责任义务，努力做到能够独立顶岗，能够独立完成岗位上的相关操作，对岗位技能知识做到
            懂，会，做</p>
        <p>　一份劳作，一份收获，我坚信自己的努力一定会有回报，而我将会仍然继<br>　　每一个像素对浏览者眼睛的吸引力有所不同，浏览者大脑对于不同位置内容的印象也有所不同。通常来说，普通浏览者浏览网页时会忽略网页两端的
            广告区</p>
    </div>
</body>

</html>

在这里插入图片描述

伪类与伪元素

伪类
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息。通常表示获取不存在与DOM树中的信息，或获取不能被常规CSS选择器获取的信息。
```
   : hover

   : focus

   : empty
   …	
```
伪元素
伪元素本质上是创建了一个有内容的虚拟容器。这个容器不包含任何DOM元素，但是可以包含内容。另外，开发者还可以为伪元素定制样式。
```
  :: selection
  :: first-line   /    first-letter
  :: before     /     after 
  …	
```

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 600px;
        }

        div::selection {
            background-color: tomato;
            color: yellow;
        }
    </style>
</head>

<body>
    <div>
        双导师，顾名思义，果的联系。因此，实习中，我们在重温课本上知识同时，将书本中的理论与实际生产部件相对应，将课上公式与实际生产数据相对应，这样不仅可以使理论知识记得更为牢固，还可以在本质上理解生产上各设备、器件的作用、原理，为今后工作中的技术革新，改进发明打下了良好的基础，极大的提高了实习质量。<br>　　三是热爱实习岗位，积极承担岗位职责，不断提升实习效率。<br>　　爱岗才能敬业
        ，热爱实习岗位才能完成好实习任务。在实习过程中，我努力培养自己对实习岗位的热情，珍惜在岗上的每一分钟，努力学习岗位上的相关知识，积极承担岗位上的责任义务，努力做到能够独立顶岗，能够独立完成岗位上的相关操作，对岗位技能知识做到
    </div>
</body>

</html>