一篇博客带你学会CSS（前后端必会、三万字笔记）

置顶 Cosmoshhhyyy

于 2024-04-10 15:33:11 发布

阅读量1.4k

点赞数 36

分类专栏： HTML + CSS + JS 一篇带你学会系列文章标签： css 笔记前端

本文链接：https://blog.youkuaiyun.com/Cosmoshhhyyy/article/details/137520983

版权

HTML + CSS + JS 同时被 2 个专栏收录

21 篇文章

订阅专栏

一篇带你学会系列

11 篇文章

订阅专栏

css 样式选择器

selector{
    property:value;
}

一、基本选择器

元素选择器 E{}

如：

div{
    background:gold; color:black; font-size:22px
}

特殊的 * 所有元素选择器

如：

* {
    background: purple;
    color: pink;
}

在这里插入图片描述

一般加不明显的样式如：

* {
    /* background: purple;
    color: pink; */
    padding: 0;
    margin: 0;
}

属性选址器 E[attr]{}

根据属性有没有进行区分可以用属性值作为限制，也可用属性值的位置作为限制,如用有无id区分：

div[id]{
    background:purple;
    color: pink;
}

或者根据id属性值区分：

div[id = xx]{
    background:purple;
    color: pink;
}

^以xx开头的：

div[id ^= xx]{
    background:purple;
    color: pink;
}

$ 以xx结尾的：

div[id $= xx]{
    background:purple;
    color: pink;
}

只要包含xx：

div[id *= xx]{
    background:purple;
    color: pink;
}

当然也可以用class等，或者自己构造一个来区分。

# id选择器

#xx{
    background:purple;
    color: pink;
}

. class选择器

.xx{
    background:purple;
    color: pink;
}

也可以结合着用

div.xx{

}
div#xx{

}

selector1 selector2 包含选择器

在selector1中寻找selector2这个元素，所以不要乱加空格。

div span{
    background-color: red;
    color:pink;
}

不一定是父子
也可以是爷孙

> 子选择器

与包含选择器相似，但必须是父子。

div>span{
    background-color: red;
    color:pink;
}

~ 兄弟选择器

拥有共同父级元素的元素们叫兄弟。
找的是selector1下边对应的能匹配的selector2的兄弟节点。

.php~div{
    background-color: red;
    color:pink;
}

如果找哥哥：反向思维。

, 选择器组合

selector1, selector2{}

div,
span {
    background: purpulr;
    color:pink;
}

div和span都加上这种样式。

二、伪元素选择器

第一个字加样式：

div::first-letter{
    font-size: large;
    color: red;
}

在这里插入图片描述

第一行加样式：

first-line{}
在这里插入图片描述

注意只有块级元素才能加。
英文要有空格才会换行，不然它以为是一个单词。
在这里插入图片描述

也可以设置换行

div{
    word-break:break-all;
}

在这里插入图片描述

往前加元素、往后加元素

div::before{
    content:"hi";
    background: red;
    color: yellow;
}

div::after{
    content:"hi";
    background: red;
    color: yellow;
}

在这里插入图片描述

三、伪类选择器

结构性伪类选择器

找第一个元素

div:nth-child(1){
    background: red;
    color: yellow;
}

在这里插入图片描述

与first-child等价
找第n个元素：div:nth-child(n)
找最后一个孩子：last-child
也可以为表达式:

div:nth-child(2n + 3){
    background: red;
    color: yellow;
}

在这里插入图片描述

n 从零开始。
也可以写英文odd（奇）、even（偶）：
在这里插入图片描述

在这里插入图片描述

也可以倒着数：
nth-last-child(odd) nth-last-child(even)
找同类型的第一个：
nth-of-type(1)
找同类型的第n 个：
nth-of-type(n)
其他相似不再给出。
找同类型的第一个：first-of-type
找同类型的最后一个： last-of-type
倒着数第n个：nth-last-of-type(n)
其实就记住nth-child和nth-of- type其他都是此基础上扩展而来。

ui状态伪类选择器

悬停状态: hover
在这里插入图片描述

div:hover{
    background: red;
    color:yellow;
}

在这里插入图片描述

焦点状态：focus

input:focus{
    background: yellow;
}

在这里插入图片描述

选择状态：checked

input:checked{
    box-shadow: 2px 2px 3px red;
}

在这里插入图片描述

四、其他类选择器

not(选择器) 排除
如：

div:not(.java):not(.php){
    
}

含义为选中div中排除名字为java，php的选择器。

盒子模型

块级盒子

独占一行，对宽度高度支持，div、p、ul、li。

内联级盒子

不独占一行，对宽度高度不支持，span、a。

内联块级盒子

不独占一行，对宽度高度支持，img、input。

弹性盒子

一个父级元素设置成弹性盒子，其子元素默认始终横向布局。
不管子元素宽度之和是否超过父级元素，最终都能放到父级元素中。

display 改变模型

display:block; 块级盒子
display:inline; 内联级盒子
display:inline-block; 内联块级盒子
display:fiex; 弹性盒子

区域划分

从里到外：内容区、填充区、边框区、外边距。

在这里插入图片描述

text 内容区

width、height 默认针对内容区设置大小。

div,
span{
    width:100px;  
    height:50px;  
}

在这里插入图片描述

padding 填充区

padding
默认是0；
顺序是：上、右、下、左。不够的话之间对称。(顺时针)
也可以单独对某一个方向进行设置：
padding-top; 上
padding-bottom; 下
padding-left; 左
padding-right; 右

div,
span{
    background: red;
    width:100px;  
    height:50px;  
    padding:10px 20px 30px 40px;
}

在这里插入图片描述

border 边框区

border-style:边框样式;
border-color:边框颜色;
border-width:边框宽度;
当然也可以单独对某一个方法边框设置：
border-top：宽度样式颜色；上
border-bottom 下
border-left 左
border-right 右
也可以对某个方向边框的某个属性设置：
border-top-width; 上边框宽度
还有很多组合就不再一一列举了。

div,
span{
    background: red;
    width:100px;  
    height:70px;  
    padding:10px 20px 30px 40px;
    border:5px solid black; //
    border-top-color:green; //
    border-bottom-color:blue; //
}

在这里插入图片描述

margin 外边距

margin，用法与padding相似。
特殊的，想要左右居中，只用设置上下距离，左右用auto即可。但反过来，不能上下居中。

div,
span{
    background: red;
    width:100px;  
    height:70px;  
    padding:10px 20px 30px 40px;
    border:5px solid black;
    border-top-color:green;
    border-bottom-color:blue;
    margin:10px auto; // 居中
}

在这里插入图片描述

直接设置盒子大小

box-sizing:content-box 设置内容区大小
box-sizing:border-box 设置整个盒子的大小

布局

横向布局

方法一 float 浮起来

添加float：left
父级没有高度，父级消失，给父级加高度。
缺点：高度需要自己计算，无法随最高子集的高度变化。
需要父级加 overflow:hidden; 本意是超出部分隐藏，但是父级没有添加高度，就会随之变化。
但任然有缺点，难以均分。

.top{
    width:800px;
    background: yellow;
    overflow:hidden;
}

.bottom{
    width:800px;
    height:200px;
    background:pink;
}

.left{
    width:300px;
    height:100px;
    background:orange;
    float:left;
}
.right{
    width:300px;
    height:100px;
    background: purple;
    float:left;
}

   <div class="top">top
        <div class="left">left</div>
        <div class="right">right</div>
   </div>
   <div class="bottom">bottom</div>

在这里插入图片描述

方法二内联块级元素实现

缺点：会产生空白，浏览器把空格，换行，当作空白字符处理，最终以一个空格的形式展示。
解决空白：1、让元素连起来 2、让父类文本大小为0，子类另行设置。

方法三弹性盒子模型

这是最常用的方法。
让父级变成弹性盒子模型，里面自动变成横向布局。
优点：不论子级宽度和多大，都可以横向放入其中。

弹性盒子模型

flex-direction 排列方式主轴方向

flex-direction: row; 横向布局，默认从左向右。
flex-direction: row-reverse; 横向布局，从右向左。
flex-direction: column; 纵向布局，从上到下。
flex-direction: column-reverse; 纵向布局，从下到上。

.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row-reverse;  
}

在这里插入图片描述

换行

flex-wrap: wrap; 换行
flex-wrap: nowrap; 不换行

排序

给子级加上 order: 编号
值越小越考前，值越大越向后排。

.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row;  
}

.bottom{
    width:800px;
    height:200px;
    background:pink;
}

.left{
    width:200px;
    height:100px;
    background:orange;
    float:left;
    order:1;
}
.middle{
    width:200px;
    height:100px;
    background:blue;
    float:left;
    order:3;
}
.right{
    width:200px;
    height:100px;
    background: purple;
    float:left;
    order:2;
}

在这里插入图片描述

控制子元素缩放比例

作用于子级元素。
flex-shrink: 压缩因子。
flex-grow: 拉伸因子。
flex-grow: 基准因子，一般用宽度代替。

.top{
    width:800px;
    background: yellow;
    display:flex;
    flex-direction: row;  
}

.bottom{
    width:800px;
    height:200px;
    background:pink;
}

.left{
    width:200px;
    height:100px;
    background:orange;
    flex-grow: 8;
}
.middle{
    width:200px;
    height:100px;
    background:blue;
    flex-grow:5;
}
.right{
    width:200px;
    height:100px;
    background: purple;
    flex-grow:1;
}

三个比例的拉伸效果：
在这里插入图片描述

在这里插入图片描述

缩放是如何实现的？

拉伸：把所有flex-gorw求和，在把未占满的位置分为总和个份数，根据每个子集的比例分给子集。
缩小：根据子集宽度按比例比例自动缩小。

控制子元素的对其方式

justify-content 横向对齐方式

其实是和主轴方向有关系，不一定是横向的，这里用横向举例展示。
justify-content: flex-start; 默认左对其
在这里插入图片描述

justify-content: flex-end; 右
在这里插入图片描述

justify-content: center; 中间
在这里插入图片描述

justify-content: space-between; 空白放中间
在这里插入图片描述

justify-content: space-around; 空白放周围
在这里插入图片描述

justify-content: space-evenly; 空白均匀分布
在这里插入图片描述

align-items 纵向对齐方式

align-items: flex-start; 默认顶端对齐
在这里插入图片描述

align-items: flex-end; 底端对齐
在这里插入图片描述

align-items: center; 居中对齐
在这里插入图片描述

align-items: baseline; 首行底端对齐
在这里插入图片描述

align-content 多行对齐方式

align-content: flex-start; 所有行都在顶端
我们先给给父级加上高度，好用来展示效果。
在这里插入图片描述

align-content: flex-end; 底部
在这里插入图片描述
align-content: center; 中间

align-content: space-betwween; 空白放中间
在这里插入图片描述

align-content: space-around; 空白放周围
在这里插入图片描述

align-content: space-evenly; 空白均匀分布
在这里插入图片描述

positon

positon:static; 静态模式
positon:fixed; 固定模式，不随浏览器的滚动而滚动，释放自己原来的空间。
position: relative; 相对模式，保留自己空间，参考物是自己原来的位置。
position: absolute; 绝对模式，释放自己原来的空间，参考物是浏览器。

结合模式

父亲用相对模式，子级用绝对模式。释放自己原来的空间，参考物是父级。

z-size

设置定位层级，值越大，越在上层。

background 复合属性

background-color 背景颜色（纯）

.main{
    width:300px;
    height:300px;
    background-color: blue;
}

在这里插入图片描述

background-image 背景图片或则渐变颜色

background-image:linear-gradient(角度(deg)，颜色1，颜色2, …); 线性渐变（渐变方向，颜色1->颜色2->…）
在背景颜色之上

.main{
    width:300px;
    height:300px;
    background-color: blue; 
    /*  */
    background-image: url(img/R-C.jfif); 
}

在这里插入图片描述

background-repeat 背景是否重复

横向repeat-x, 纵向repeat-y;
默认repeat，可设为不重复no-repeat
background-repeat:round; 个体完整，微调大小
background-repeat:space; 调整空隙

.main{
    width:300px;
    height:300px;
    background-color: rgb(160, 236, 255); 
    background-image: url(img/R-C.jfif); 
    /*  */
    background-size:30%;
    background-repeat: space;
}

在这里插入图片描述

background-size 设置图片大小

background-size:宽度，高度;
单位可以是像素和百分数。
例如上一个例子中，图片太大了，我们将图片设置为30%。

    background-size:30%;

cover 预定义值（覆盖）根据大小自动变化

background-position 设置背景图片显示位置

background-position: 横向偏移量，纵向偏移量;
backgound-position-y; y轴
backgound-position-x; x轴
默认显示左上角0，0;

background-attachment 设置背景图片是否随页面滚动

background-attachment:scroll; 滚动(默认)
background-attachment:fixed; 固定
下面是固定模型的效果：
在这里插入图片描述

<!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>
        *{
            padding:0;
            margin:0;
        }
        body{
            width:100%;
        }
        .zw{
            height: 500px;
        }
        .box{
            width:100%;
            background-image: url(1.jpg);
            background-attachment:fixed; 
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="zw">
        占位置
    </div>
    <div class="zw">
        占位置
    </div>
    <div class="box">
        
    </div>
    <div class="zw">
        占位置
    </div>
    <div class="zw">
        占位置
    </div>
</body>
</html>

color 颜色

英文单词

6位16进制hex

2位代表一个色相：红、绿、蓝。
每一位的大小是16进制。

rgb

与上一种相同，只不过是10进制表示。
0 ~ 255
rgba 多了一个参数透明0 ~ 1

长度单位

绝对单位

px(像素)、pt(点)、in(英寸)、cm(厘米)、mm(毫米)

相对单位

% 以父级元素宽度为参考维度
em 父级元素的字体大小为参考维度
rem 根元素的字体大小为参考维度
vw 以浏览器窗口的宽为参考维度
vh 以浏览器窗口的高为参考维度
vmin、vmax 以浏览器识图窗口的最小值或则最大值进行参考

服务器字体

解决字体不一致而产生的。
首先，在网上把字体下载好。

定义服务器字体

@font-face{
    font-family:字体名称;
    src:url(字体资源路径);
}

使用

在需要使用的选择器里加上
font-family:字体名称;

例子

@font-face {
    font-family: llp;
    src: url("123.ttf");
}
.main{
    font-family: llp;
    background: pink;
}

在这里插入图片描述

响应式布局

页面根据屏幕窗口大小，显示不同的样式。

@media 设备类型 [and 设备特性]{
    样式....
}

设备类型

基本上都用的 screen 屏幕

设备特性

主要用的是屏幕的宽度

例子

在这里插入图片描述

.m {
    border: 1px solid red;
}
.mb{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    
}
.m:nth-child(1){
    width:49%;
    min-height: 400px;
}
.m:nth-child(2){
    width:49%;
    min-height: 400px;
}
.m:nth-child(3){
    width:100%;
    margin-top: 10px;
}
@media screen and (min-width:1000px){
    .mb{
        display: flex;
        justify-content: center;
        flex-wrap:nowrap;
    }
    .m{
        width:35%;
        margin:10px 1%;
    }
}
@media screen and (max-width:300px){
    .mb{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .m:nth-child(1){
        width:100%;
        margin: 5px 0;
    }
    .m:nth-child(2){
        width:100%;
        margin: 5px 0;
    }
    .m:nth-child(3){
        width:100%;
        margin: 5px 0;
    }
}

变形与动画

transform 变形

包括：位移、旋转、缩放、倾斜。
下面的方法都是transform里的，记得加上。
展示效果为变化前后对比。

translate 位移

translate(tx, ty); 只沿着x轴、y轴移动
translateX(tx) 只沿着x轴移动
translateY(ty) 只沿着y轴移动
translateZ(tz) 只沿着z轴移动
translate3d(tx, ty, tz) 沿着x轴、y轴、z轴移动

transform: translate(20px, 20px);

在这里插入图片描述

scale 缩放

scale(sx, sy) 沿着x、y轴缩放，小于1缩小，大于1放大
scaleX(sx) 沿着x轴缩放
scaleY(sx) 沿着y轴缩放
scaleZ(sx) 沿着z轴缩放
scaleZ(sx, sy, sz) 沿着x、y、z轴缩放

transform: scale(1.2, 1.2);

在这里插入图片描述

rotate 旋转

rotate(angle) 沿着z轴旋转
rotateX(angle) 沿着x轴旋转
rotateY(angle) 沿着y轴旋转
rotateZ(angle) 沿着z轴旋转
rotate3d(angle) 沿着x、y、z轴旋转

transform: rotate(30deg);

在这里插入图片描述

skew 倾斜

skew(xangle, yangle) 沿着x、y轴倾斜
skewX(xangle) 沿着x轴倾斜
skewY(xangle) 沿着y轴倾斜

transform: skew(10deg, 10deg);

在这里插入图片描述

多种变形

多种变形函数用空格隔开即可，注意不要用逗号。
例如这样：

transform: translate(20px, 20px) scale(1.2, 1.2) skew(10deg, 10deg) scale(1.2, 1.2);

设置变形中心点

transfrom-origin:x坐标 y坐标（数值、left、top…）
放在需要改变的选择器上。
例如：没有设置时默认为中心。

在这里插入图片描述

设置为 0 0 为变形中心点后。

transform-origin: 0 0;

在这里插入图片描述

perspective 3d透视效果

perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

作用于在父级上。

preserve-3d 3d嵌套效果

相互可以视觉上插入和覆盖
transform-style: preserve-3d; 也是用在父级上

例子奥运五环

通过每个环细微的旋转角度实现。
主要看各各环之间的覆盖关系，这就是3d嵌套的效果。

在这里插入图片描述

<!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>
        .mb{
            background: pink;
            height:600px;
            display: flex;
            justify-content: center;
        }
        .m{
            padding-top: 200px;
            width:360px;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
            transform-style: preserve-3d;
        }
        .l{
            margin: 2px;
        }
        .l:nth-child(1){
            width:100px;
            height: 100px;
            border:7px solid blue;
            border-radius: 100%;
            transform: rotateX(-1deg) rotateY(-2deg);

        }
        .l:nth-child(2){
            width:100px;
            height: 100px;
            border:7px solid black;
            border-radius: 100%;
            transform: rotateX(-1deg) rotateY(-2deg);
        }
        .l:nth-child(3){
            width:100px;
            height: 100px;
            border:7px solid red;
            border-radius: 100%;
            transform: rotateX(-3deg) rotateY(-3deg);
        }
        .l:nth-child(4){
            width:100px;
            height: 100px;
            border:7px solid yellow;
            border-radius: 100%;
            position: relative;
            left:56px;
            bottom: 60px;
            transform: rotateX(0deg) rotateY(2deg);
        }
        .l:nth-child(5){
            width:100px;
            height: 100px;
            border:7px solid green;
            border-radius: 100%;
             position: relative;
            left:56px;
            bottom: 60px;
            transform: rotateX(2deg) rotateY(4deg);
        }
    </style>
</head>
<body>
    <div class="mb">
        <div class="m">
            <div class="l"></div>
            <div class="l"></div>
            <div class="l"></div>
            <div class="l"></div>
            <div class="l"></div>
        </div>
    </div>
</body>
</html>

backface-visibility 背面效果

backface-visibility: hidden; 背面不可见

transition 过渡动画

用来给变形加上过渡动画的，例如我们hover时才让目标变形，就可以加上过渡动画，来展示效果。说白了就是给其加上计算出来的过程。

transition–property 设置指定属性进行过渡动画
transition-duration 设置动画的持续时间
transition-timing-function 设置动画的渐变速度，其值有linear（匀速）、ease（由快到慢，由快倒满）、ease-in（由快到慢）、ease-out(由快到慢)
transition-delay 设置动画延迟时间

多种属性变化

,号隔开即可
transition: 属性持续时间渐变速度延迟时间

transition-property: width, height, color;
transition-duration: 1s, 1.5s, 2s;
transition-timing-function: ease, linear, ease-in;
transition-delay: 0s, 1s, 0s ;

也可以这样：

transition: width 1s ease 0s, heigth 1.5s linearr 1s, color 2s ease-in 0s;

例子：

在这里插入图片描述

<!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>
        *{
            padding:0;
            margin:0;
        }
        body{
            width:100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            background: red;
            width:200px;
            height: 200px;
            transition: width 2s ease 0s, heigth 4s linear 1s, background-color 4s;
        }
        div:hover{
            background: blue;
            width:300px;
            height: 300px;
            transform:  rotate(360deg);
        }
    </style>
    
</head>
<body>
    <div>

    </div>
</body>
</html>

animation 帧动画

定义好后作用于需要变化的标签上。

使用

animation-name 设置动画名称
animation-duration: 设置动画的持续时间
animation-timing-function 设置动画渐变速度
animation-delay 设置动画延迟时间
animation-iteration-count 设置动画执行次数无穷次（infinite）
animation-direction 设置动画的方向值有alternate（交替）
animation-play-state 设置动画播放的状态值 paused（暂停）
也可以向 transiton 那样多种属性写在一起，如：

animation: dh 4s linear 0s infinite alternate;

定义

@keyframes 动画的名称{  
    百分数 | to | from {  
        .....  
    }  
}

例子1 字母

在这里插入图片描述

<!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>
        @keyframes dh {
            30% {
                width:200px;
                margin-left: 5px;
                background: blue;
                border-radius: 10%;
                border: 5px solid yellow;
            }
            50% {
                height: 300px;
                margin-left: 100px;
                background: yellow;
                border-radius: 50%;
                border: 5px solid white;
            }
            100% {
                height: 200px;
                margin-left: 500px;
                background: white;
                border-radius: 100%;
                border: 5px solid blue;
            }
        }
        .mb{
            height:600px;
            padding:50px ;
            display: flex;
            background: pink;
            align-items: center;
        }
        .b{
            border: 5px solid black;
            width:150px;
            background: red;
            height: 150px;
            animation:  4s linear 0s infinite alternate dh;
        }
    </style>
</head>
<body>
    <div class="mb">
        <div class="b">

        </div>
    </div>
</body>
</html>

例子2 水滴

水滴：除了不太像，还是挺像的。。。
在这里插入图片描述

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height:100vh;
            background: #81ecec;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        body .sd{
            width:300px;
            height: 300px;
            background: rgb(255,255,255,0.1);
            border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;
            box-shadow: 10px 10px 20px #518a8a, 5px 5px 20px #518a8a inset,
            -10px -10px 30px #c5f2f2 inset;
            padding: 20px;
            animation: dh 5s ease alternate infinite;
        }   
        body .sd::after{
            margin-top: 10px;
            margin-left: 70px;
            float: left;
            content:" ";
            width:40px;
            height:40px;
            background: rgb(255,255,255,0.1);
            border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;
            box-shadow: -2px -2px 30px #cff6f6 inset;
        }
        body .sd::before{
            margin-top: 40px;
            margin-left: 70px;
            float: left;
            content:" ";
            width:20px;
            height:20px;
            background: rgba(145, 237, 237, 0.1);
            border-radius: 36% 64% 73% 27% / 37% 57% 43% 63% ;
            box-shadow: -2px -2px 30px #cff3f3 inset;
        }
        @keyframes dh {
            30%{
                border-radius: 65% 35% 56% 44% / 48% 41% 59% 52% ;
                width:350px;
                height: 350px;
            }
            50%{
                border-radius: 40% 60% 28% 72% / 70% 71% 29% 30% ;
                width:325px;
                height: 320px;
            }
            80%{
                border-radius: 40% 60% 70% 30% / 74% 48% 52% 26% ;
                width:320px;
                height: 270px;
            }
            100%{
                border-radius: 46% 54% 17% 83% / 54% 38% 62% 46% ;
                width:275px;
                height: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="sd">

    </div>
</body>
</html>

例子3 会动的边框

在这里插入图片描述

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
            background:#000;
        }

        .box{
            position: relative;
            overflow: hidden;
        }
        .box .txt{
            display: flex;
            font-size: 300px;
            background: linear-gradient(45deg, red, blue, green,pink);
            -webkit-background-clip: text;
            color:transparent;
            justify-content: center;
            align-items: center;
            padding:0 40px;
        }
        .box .xz{
            width:150px;
            height: 600px;
            position: absolute;
            top:50%;
            left: 50%;
            /* transform: translate(-50%, -50%); */
            background: linear-gradient(red, blue, green,pink);
            animation: dh 4s linear 0s infinite;
            transform-origin: 0 0 ;
            z-index: -2;
        }
        .box .txt::before{
            content:"";
            position:absolute;
            display: block;
            width:96%;
            height:94%;
            background: #000;
            z-index: -1;
        }
        @keyframes dh {
            0%{
                rotate: 0deg;
            }
            100%{
                rotate: 360deg;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="txt">
            Hello
        </div>
        <div class="xz">

        </div>
    </div>
</body>
</html>

例子4 旋转木马

在这里插入图片描述

可以自己往里面放点图片。

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            display: flex;
            height:100vh;
            justify-content: center;
            align-items: center;
            background-color: black;
            perspective: 1000px;
        }
        .box{
            width:200px;
            height:200px;
            display: flex;
            position: relative;
            transform-style: preserve-3d;
            animation: action 30s linear infinite; 
        }
        .box .item{
            width:200px;
            height:200px;
            position: absolute;
            box-shadow: 0 0 20px white;
            -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
        }
        .box .item:nth-child(1)
        {
            background-color: blue;
            transform: rotateY(0deg) translateZ(500px);
        }
        .box .item:nth-child(2)
        {
            background-color: pink;
            transform: rotateY(60deg) translateZ(500px) ;
        }
        .box .item:nth-child(3)
        {
            background-color: red;
            transform: rotateY(120deg) translateZ(500px) ;
        }
        .box .item:nth-child(4)
        {
            background-color: white;
            transform:rotateY(180deg) translateZ(500px) ;
        }
        .box .item:nth-child(5)
        {
            background-color: green;
            transform:rotateY(240deg) translateZ(500px) ;
        }
        .box .item:nth-child(6)
        {
            background-color: yellow;
            transform:rotateY(300deg) translateZ(500px) ;
        }
        @keyframes action{
            0%{
                transform: rotateX(-10deg) rotateY(0deg);
            }
            100%{
                transform: rotateX(-10deg)rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

mix-blend-mode 色彩混合模式

screen 只取亮的部分

例子只有字体部分显示视频

在这里插入图片描述

<!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>
        *{
            margin:0;
            padding:0;
        }

        body{
            display: flex;
            height:100vh;
            justify-content: center;
            align-items: center;
        }
        .box{
            width:50vw;
            height:300px;
            position: relative;
            background: red;
        }
        .box video{
            width:100%;
            height:300px;
            object-fit: cover;
        }
        .box .txt{
            background: #fff;
            height: 100%;
            width:100%;
            font-size: 10vw;
            position:absolute;
            font-family: "隶书";
            top:50%;
            font-weight: 900;
            transform: translate(0%, -50%);
           
            text-align: center;
            mix-blend-mode: screen;
        }
    </style>
</head>
<body>
    <div class="box">
        <video src="League of Legends (TM) Client 2022-02-13 17-57-18.mp4" autoplay loop></video>
        <div class="txt">火云邪神</div>
    </div>
</body>
</html>

filter 滤镜

动图为效果添加前后对比。
经常用ps的应该知道这些的属性的含义，可以自己试一试看看不同参数都有什么样的效果。

blur() 模糊度

作用是调整模糊度，单位像素。

filter: blur(10px);

在这里插入图片描述

例子渐变光晕

其实是两个相同的div叠加，其中一个加上了模糊度。

在这里插入图片描述

<!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>
        *{
            margin:0;
            padding:0;
        }

        body{
            display: flex;
            height:100vh;
            justify-content: center;
            align-items: center;
            background: #000;
        }
        .box{
            width:300px;
            height: 400px;
            background: linear-gradient(30deg,#3498db,#9b59b6);
            border-radius: 5px;
            position: relative;
        }
        .box::before{
            content:"";
            width:120%;
            height: 120%;
            position: absolute;
            background: red;
            z-index: -1;
            top:-10%;
            left:-10%;
            background: linear-gradient(30deg,#3498db,#9b59b6);
            filter:blur(70px);
        }
    </style>
</head>
<body>
    <class class="box">

    </class>
</body>
</html>

brightness() 元素亮度

作用是调整元素的亮度，单位百分数或小数，小于1暗，大于亮。

filter: brightness(0.5);

在这里插入图片描述

contrast() 对比度

作用是调整元素的对比度，单位是百分数。
大于1提高对比度，小于1降低对比度。
这里加个图片吧，更好的展示此效果。

filter: contrast(2);

在这里插入图片描述

grayscale() 元素灰度

作用是调整元素的灰度，单位是百分数。
最大是百分之百。
网站需要在特殊节日变成灰色就可以给body加上这个属性。让整个网站变成灰色调。

filter: grayscale(1);

在这里插入图片描述

hue-rorate() 色相

调整元素的色相，单位是角度。

filter: hue-rotate(80deg);

在这里插入图片描述

opacity() 透明度

调整元素的透明度，单位是百分数。

filter: opacity(0.5);

在这里插入图片描述

invert() 反转颜色

invert() 调整元素的反转输入颜色，单位是百分数。

filter: invert(1);

在这里插入图片描述

saturate() 饱和度

改变图像饱和度。值为 0% 则是完全不饱和，值为 100% 则图像无变化。超过 100% 则增加饱和度。

filter: saturate(2);

在这里插入图片描述

backdrop-filter 蒙版，滤镜

与filter用法相同，只不过其是对其后面元素起作用的。
可以理解为filter作用于物体，而backdrop-filter相当于一个幕布，遮住的才会变化。还是不理解没关系，看下面的例子就明白了。

例子卷轴展开

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/47656fe200ea4d1cb722c4bfde33102c.gif)

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        body{
            display: flex;
            height:100vh;
            justify-content: center;
            align-items: center;
        }

        .box{
            display: flex;
            width:60%;
            object-fit: cover;
            object-position: center top;
            position: relative;
        }
        
        .box img{
            height:600px;
            width:100%;
            object-fit: cover;
        }
        .box::before{
            content:"";
            width:100%;
            height: 100%;
            background: rgb(255, 255, 255, 0.4);
            position: absolute;
            right:0; 
            backdrop-filter: blur(10px);
            border-left: 5px solid #000;
            transition: 5s ease;
        }
        .box:hover::before{
            width: 0;
            border-left: 10px solid #000;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="1.jpg" alt="">
    </div>
</body>
</html>

杂记

文本居中

text-align:center;
line-height:行高调居中

placehoder 加描述内容

相对位置居中

.pt .play{
    background-image: url(img/play.png);
    width:58px;
    height: 58px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

box-sizing:border-box 以边框为宽高避免边框宽度的影响

object-fit: cover 不变形

object-position: 显示位置

overflow:hidden 超出部分隐藏

-webkit-text-stroke: 描边

尺寸，颜色;

例子字体描边与 shadow描边

在这里插入图片描述

<!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>
        *{
            padding:0;
            margin: 0;
        }
        body{
            display: flex;
            height: 100vh;
            justify-content: center;
            flex-direction: column;
            background: #48dbfb;
            align-items: center;
            font-size: 20vh;
            font-weight: 800;
        }
        .box1{
            color: #ff9ff3;
            color: #48dbfb;
            text-shadow:3px 3px 5px #ff9ff3, -3px -3px 5px #ff9ff3,3px -3px 5px #ff9ff3,
            -3px 3px 5px #ff9ff3
        }
        .box2{
            color:transparent;
            -webkit-text-stroke: 5px #5f27cd;
        }
    </style>
</head>
<body>
    <div class="box1">
        Hello
    </div>
    <div class="box2">
        World
    </div>
</body>
</html>

letter-spacing 子的间距

color:transparent 透明

calc 计算函数

:valid 验证

required

label 表单管理，for 和 id 相同的关联起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    性别： <input type="radio" name="sex" id="man">
    <label for="man">男</label>
    <input type="radio" name="sex" id="woman">
    <label for="woman">女</label>
</body>
</html>

::-webkit-input-placeholder

place文本框字体里的颜色。

text-decoration: none 取消input样式

例子

选择显示，3d旋转

在这里插入图片描述

<!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>
    *{
        padding:0;
        margin:0;
        transition: 1s linear;
    }

    body{
        height: 100vh;
        display: flex;
        justify-content:center;
        align-items: center;
        background: #000;
    }

    .container{
        width:500px;
        display: flex;
        color: #fff;
        perspective: 1200px;
    }
    
    .container .tab_body{
        flex: 1;
        position: relative;
        transform-style: preserve-3d;
        /* transform: rotateX(10deg) rotateY(10deg); */
    }

    .container .tab_body .tab_content{
        position: absolute;
        width: 95%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: blue;
        height: 230px;
        flex-direction: column;
    }
    .container .tab_body .tab_content:nth-child(1){
        transform: rotateX(-270deg) translateY(-115px);
        transform-origin: top center;
        background: #ff9ff3;
    }
    .container .tab_body .tab_content:nth-child(2){
        transform: translateZ(115px);
        background: #feca57;
    }
    .container .tab_body .tab_content:nth-child(3){
        transform-origin: bottom center;
        transform: rotateX(-90deg) translateY(115px);
        background: #1dd1a1;
    }
    .container .labels{
        height: 250px;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        line-height: 75px;
    }
    .container .labels label:nth-child(1){
        background: #ff9ff3;
    }
    .container .labels label:nth-child(2){
        background: #feca57;
    }
    .container .labels label:nth-child(3){
        background: #1dd1a1;
    }
    input[type="radio"]{
        display: none;
    }
    .container .labels label{
        height: 80px;
        width: 100px;
        background: green;
        cursor: pointer;
        transition: .5s;
    }
    .container .labels label:hover{
       box-shadow: inset 0 0 20px#222f3e;
    }
    #top:checked~.tab_body{
        transform: rotateX(-90deg) translateZ(5px);
    }
    #middle:checked~.tab_body{
        transform: rotateX(0deg) translateY(20px);
    }
    #bottom:checked~.tab_body{
        transform: rotateX(90deg) translateZ(-5px);
    }
    </style>
</head>
<body>
    <div class="container">
        <input type="radio" name="tabs" id="top">
        <input type="radio" name="tabs" id="middle">
        <input type="radio" name="tabs" id="bottom">
        <div class="tab_body">
            <div class="tab_content">
                <h1>top content</h1>
                <p>content</p>
            </div>
            <div class="tab_content">
                <h1>middle content</h1>
                <p>content</p>
            </div>
            <div class="tab_content">
                <h1>bottom content</h1>
                <p>content</p>
            </div>
        </div>
        <div class="labels">
            <label for="top">top</label>
            <label for="middle">middle</label>
            <label for="bottom">bottom</label>
        </div>
    </div>
</body>
</html>