CSS3 笔记整理

以前学习时候记的笔记太乱了，现在利用国庆时候花一两天复习并整理一下，方便知识体系化、以后复习使用。

一、border-radius —— 圆角

设计任何元素的圆角样式，其值确定圆角形状

属性	说明
border-radius	设置四个角的圆角简写属性
border-top-left-radius	左上角表框形状
border-top-right-radius	右上角边框形状
border-bottom-left-radius	左下角边框形状
border-bottom-right-radius	右下角边框形状

border-radius接收一到四个值，对应规则如下:

• 一个值 x：x作用于四个角
• 两个值 x、y：x作用于左上角和右下角，y作用于左下角和右上角
• 三个值 x、y、z：x作用于左上角，y作用于右上角和左下角，z作用于右下角
• 四个值 x、y、z、w：依次作用于 左上角、右上角、右下角、左下角

border-radius的值可以为具体的像素值，如 10px；也可以为百分比，如10%。其中，设置正方形边框四个角的 border-radius的值为10%时，将得到圆

---

二、border-image —— 边框图像

想要使该属性起作用，应用该属性的元素必须还要设置border属性

border-image可以设置三个参数：

• url(图片资源路径)
• 裁切值：整数或百分数
• 规定图片 重复 或 拉伸 或 圆角

#borderImg {
    border: 10px solid transparent;
    padding: 20px;
    border-image: url(imageName.png) 10% stretch
}

border-image实际上是简写属性，他包括以下部分:

• border-image-source
• border-image-silce
• border-image-width
• border-image-outset -> 边框图像超出边框盒的量
• border-image-repeat -> 设置重复（repeat）、圆角（round）、或是拉伸（stretch）

---

三、background-（size/origin/clip） —— 多重背景

background依然是一个简写属性，它包括:

属性	说明
background-clip	背景图的绘制区域
background-image	当前元素的一或n幅背景图
background-origin	背景图放置位置
background-size	背景图大小

#roleImage {
    background: url(p1.png) right bottom no-repeat, url(p2.png) left top repeat;
    background-size: 50px, 130px;  //50px作用于p1，130px作用于p2
}

#div2Image {
    background-image: url(p1.png);
    background-size: 50px 50px;    // background-size: cover(或者 contain)
    background-repeat: no-repeat;
    background-origin: content-box;
}

background-origin；指定背景图像位置，可以接收三个不同的值

• border-box: 背景图片从边框左上角开始
• padding-box：背景图片从内边距边缘的左上角开始
• content-box：背景图片从内容的左上角开始

background-clip：指定背景的绘制区域，可以接收三个不同的值

• border-box: 背景绘制到边框外边缘（默认设置）
• padding-box：背景绘制到内边距的外边缘
• content-box：背景绘制到内容框中

---

四、颜色

1、RGBA颜色：略

2、HSL颜色

HSL颜色指色相、饱和度和亮度。HSL颜色具体说明

3、HSLA颜色

即：HSL颜色+透明度

HSLA多了一个Alpha通道，其中alpha参数即设置透明度，其值范围：0.0（完全透明）~ 1.0（完全不透明）

4、opacity——不透明度

与 alpha参数相反，opacity参数范围为： 0.0（完全透明）~ 1.0（完全不透明）

---

五、CSS渐变色

5.1、linear-gradient —— 线性渐变

线性渐变是指：颜色 向下 / 向上 / 向左 / 向右 / 沿对角线 渐变

效果如图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2M5OjpXM-1664886826255)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5189c37adcc4130a1b4b15a46804f9a~tplv-k3u1fbpfcp-watermark.image?)]

线性渐变设置语法：background-image: linear-gradient(direction,color1,color2,……);

其中，direction 是渐变的方向，默认为从上到下（to bottom），可以手动设置为；to right、to left、to bottom left（沿对角线从右上到左下）等，也可以设置角度，比如-45deg，注意设置角度时单位用deg，color1、color2等称为色标，为沿设置的渐变方向依次为渐变过程中的出现的颜色，如从color1渐变为color2

实例：

#div1 {
    background-image: lineargradient(to top right, red, blue, purple);
}

#div2 {
    background-image: lineargradient(45deg, blue, purple);
}

/*使用rgba颜色作为色标,并引入透明度*/
#div3 {
    background-image: lineargradient(to left, rgba(255, 10, 10, 0.5), rgba(100, 100, 100, 0.85));
}

重复线性渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CirE6O3i-1664886826256)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/762c9623c58b4b4f886a0f37ee8be5e6~tplv-k3u1fbpfcp-watermark.image?)]

将linear-gradient改为repeat-linear-gradient即可

#div4 {
    background-image: repeat-linear-gradient(to right, blue, perple);
}

5.2、radial-gradient —— 径向渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELICfvzi-1664886826257)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0013b8e1489f4becba387bb1b949db88~tplv-k3u1fbpfcp-watermark.image?)]
由中心向四周呈一定形状延伸渐变

语法:background-image:radial-gradient(shape size at position, startColor, …, lastColor);

其中 shape 为设置的形状，size 为最远角，position 为渐变中心。这三个值可以不传，不传时取其默认值。

• shape: 值为 circle 或 ellipse（默认椭圆形）
• size：值为 closest-side、farthest-side、closest-corner、farthest-corner

实例：

#grad1 {
    background-image: radial-gradient(closest-side at 60% 30%, blue 30%, purple 20%);
}

重复径向渐变；repeating-radial-gradienty();

---

六、shadow —— 阴影效果

阴影分为 文本阴影text-shadow 和 元素阴影box-shadow

可以接收多组值，各组间以逗号分隔，每一组最多四个值（3个像素值 + 颜色）

值	说明
第一个像素值	水平阴影大小
第二个像素数值	垂直阴影大小
第三个像素数值	阴影模糊效果
color	阴影颜色

实例：

h2 {
    text-shadow: 3px 0 2px skyblue, 0 0 10px blue;
}

box-shadow的值与 text-shadow 一样，只是注意 box-shadow 作用于元素，而 text-shadow 作用于文本内容

七、文本效果

相关属性	说明
text-overflow	文字溢出
text-aligin-last	对齐文本最后一行的规则
text-justify	设置对齐的文本对齐和间隔的规则
word-wrap	文字换行
word-break	文字换行规则
writing-mode	书写模式

1、text-overflow

值	说明
clip	溢出部分被裁剪，不显示
ellipsis	溢出部分以 … 表示

同时，为了让该属性生效，还需要设置:

• white-space: nowrap —— 文本在一行内显示
• overflow:hidden —— 溢出内容隐藏

2、word-wrap —— 文字换行

值为: break-word

该属性用于将溢出文本框部分的文字强制换行

3、word-break —— 换行规则

值	说明
keep-all	保留单词的完整性，若截断处在单词内，则该单词整体直接换行
break-all	不保留单词完整性，直接在截断处换行

4、writing-mode —— 书写模式

规定文本是 水平放置 还是 垂直放置

值	说明
horizontal-tb	文本水平放置
vertical-rl	文本垂直放置

---

八、@font-face规则 —— Web字体

使用自有字体—— 用户计算机上未安装的字体，将这些字体包含在开发人员的web服务器上，在需要时会自动下载给用户。

使用@font-face定义web字体

@font-face {
    font-family: fontName;
    src: url(字体文件);
}

//使用定义的web字体
div {
    font-family: fontName;
}

属性	说明	值
font-family	必选，命名字体名称	name
src	必选，字体文件的url	url
font-stretch	可选，拉伸字体形式，默认值为"normal"	normal、condensed、- ultra-condensed、 extra-condensed、semi-condensed、expanded、simi-expanded、extra-expanded、ultra-expanded
font-style	可选，字体样式，三个值:normal(默认)、italic、oblique
font-weight	可选，字体粗细	normal、bold、100~900(整百)
unicode-range	可选，定义字体支持的 UNICODE 字符范围，默认为"U+0-10FFFF"	unicode范围

---

九、transform —— 2D、3D转换

9.1、2D转换

transform属性中2D转换方法	说明
translate()	从当前位置根据x、y轴参数移动元素
translateX()	从当前位置根据x轴参数移动元素
translateY()	从当前位置根据y轴参数移动元素
rotate()	根据设置的角度值(deg)，顺时针(正)或逆时针(负)旋转元素
scaleX()	传入宽度倍数x，将元素增大到原始宽度的x倍，若设置为-1，则水平翻转
scaleY()	传入高度倍数，将元素增大到原始高度的y倍，若设置为-1，则上下翻转
scale()	传入宽、高参数，根据参数将元素增大到原始宽高的对应倍数，未指定第二个参数则默认为1
skewX()	传入角度参数，使元素沿X轴倾斜给定角度
skewY()	传入角度参数，使元素沿y轴倾斜给定角度
skew()	传入两个参数x deg，y deg，使元素沿x轴、y轴倾斜对应给定角度，未指定第二个参数，则默认为0deg
matrix()	组合所有2D方法为一个，接收6个参数值，依次对应: scaleX()、skewY()、skewX()、scaleY()、translateX()、translateY()

9.2、3D转换

3D转换方法

• rotate3d(x,y.z)及相关方法
• translate3d(x,y,z)及translateX()等相关方法
• scale3d(x,y,z,angle)及scaleX()等相关方法
• matrix3d()(传入16值的4×4矩阵)

所有3D转换属性

属性	说明
transform	应用2d或3d转换
transform-origin	改变被转换元素的位置
transform-style	设置被嵌套元素如何在3d空间中显示
perspective	设置3d元素的透视效果
perspective-origin	设置3d元素的底部位置
backface-visibility	设置元素在不面对屏幕时是否可见

---

10、transition —— 过渡效果

通过CSS3你可以在一定时间内平滑地改变元素的属性值，从而实现元素过渡动画效果。注意: 若是hover触发过渡，则鼠标离开时变回原来的样式也是平滑的

相关属性:

• transition
• transition-delay
• transition-duration -> 过渡效果持续时间（s/ms）
• transition-property -> 过渡效果所针对的CSS属性名
• transition-timing-function

transition

过渡效果的两个元素：需要被添加效果的CSS属性，效果的持续时间。当被设置过渡效果的属性发生变化时，过渡动画便会触发

实例：

div{
    width: 300px;
    height: 200px;
    background: blue;
    transition: background 1.5s, width 2s; //对背景色设置过渡效果，当背景色改变时，1.5s的过渡动画触发
}

div:hover {
    background: purple;
    width: 200px
    //给div设置伪类元素，鼠标悬停时改变其背景色和宽度，同时触发过渡效果
}

transition-timing-function —— 过渡效果速度曲线

值	说明
ease	过渡效果缓慢开始，然后加速，再缓慢结束（默认）
linear	从开始到结束的过渡效果是匀速变化的
ease-in	缓慢开始
ease-out	缓慢结束
ease-in-out	开始和结束缓慢
cubic-bezier(n,n,n,n)	自己定义贝塞尔曲线函数的参数

transition-delay —— 延迟过渡

其值为过渡启动前的延迟时间

div {
    transition-delay: 1s;
    //触发过渡效果时，经过1s再开始播放过渡效果动画
}

为转换添加过渡

transition值中添加transform的时间

div{
    width: 50px;
    height: 50px;
    background: skyblue;
    transition: width 1s, height 1s, transform 1s;
}

div:active{
    width: 150px;
    height: 150px;
    transform: rotate(90deg);
}

---

11、@keyframes + animation —— CSS动画

CSS动画: 元素逐渐从一种样式变为另一种样式，这期间样式的数量及相关属性可以任意更改

使用CSS动画，需要设置好关键帧，即元素在特定时间点所具有的样式

1、@keyframs规则，通过from-to，设置动画名称，以及元素动画的始末样式，格式如下

@keyframes name {
    from{
        width: 500px;
        height: 400px;
        background-color: skyblue;
    }to{
        width: 200px;
        height: 150px;
        background: purple;
    }
}

注意,

• Chrome和Safari支持的是@-webkit-keyframs，webkit-animation
• fireFox支持的是@-moz-keyframs、-moz-animation

以Chrome为例：

//创建动画
@-webkit-keyframes myFir //设置动画名为 myFir
    from{ //动画开始
        background-color: skyblue;
    }to{   //动画完成
        width: 200px;
        height: 150px;
        background: purple;
    }
}

div {
    width: 50px;
    height: 125px;
    background-color: skyblue;
    -webkit-animation: myFir 2s; //绑定动画到选择器，并设置动画时长，动画才会生效
                                 //Chrome 和 Safari 浏览器中使用-webkit-animation
    
}

通过时间的百分比位置，设置动画关键帧

@-webkit-keyframs myFir {
    0% {
        background-color: blue;
        left:10px;
    }
    50% {
        background-color: skyblue;
        left:500px;
    }
    100% {
        background-color: yellow;
        left:990px;
    }
}

animation相关属性

属性	说明
animation-name	动画名
animation-duration	动画时长
animation-delay	动画开始前的延迟时间，如果设置负值N，则相当于动画开始播放时已经播放时间为N
animation-iteration-count	动画运行次数，设置infinite则动画一直反复持续下去
animation-direction	设置动画向前播放、向后播放或交替播放。其值可选：normal正常向前播放；reverse向后反方向播放；alternate先向前播放再向后播放；alternate-reverse先向后播放再向前
animation-timing-function	动画的速度曲线，值同过渡的速度曲线
animation-fill-mode	填充模式。控制动画播放结束后元素样式。值为：none默认值，动画结束后元素回到原始样式；forward动画结束后元素呈现动画的最后一个关键帧样式；backwards动画结束后元素呈现第一个关键帧设置的样式（取决于 animation-direction），并在动画延迟期间保留该值。both动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

以上动画属性均可使用简写的animation属性一起设置

animation-play-state / -webkit-animation-play-state：

控制动画播放或暂停

值	说明
running	动画播放（默认）
paused	动画暂停

---

12、filter —— 图像滤镜

CSS滤镜参考手册

---

13、object-fit 调整以适应容器

该属性用于指定调整<img>以及<video>的大小来适应他们的容器

值	说明
fill	默认值， 调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain	缩放替换后的内容以保持其宽高比，同时将其放入元素的内容框。
cover	调整替换内容大小，填充整个内容框时保持其长宽比，若必要会裁剪对象
none	不调整替换的内容大小
scale-down	调整内容大小就像没有指定内容或包含内容一样，这会使对象尺寸较小

---

14、column-xxx —— 多列布局

将长文本分为多列并排展示

属性	说明	值
column-count	所分列数	一个正整数
column-gap	各列之间间隙	像素值
column-rule-style	分隔格列的规则样式	solid等
column-rule-width	各列之间的规则宽度	像素值
column-rule-color	各列之间的规则颜色	color
column-rule	width、style、color的综合	依次为width、style、color
column-span	规定某元素横跨多少列显示（一般用于标题等）	整数，或者all
column-width	指定各列的建议最佳宽度	像素值

15、resize + outline-offset —— 用户界面

属性	说明
outline-offset	轮廓偏移，在轮廓和元素的边框边缘之间添加空间
resize	规定元素是否可由用户调整大小，以及以什么方式调整大小

resize

值	说明
horizontal	允许用户调整元素宽度
vertical	允许用户调整元素高度
both	允许用户调整元素宽高
none	禁止用户调整

outline-offset

轮廓是在元素边框之外绘制的，可能与其他内容重叠，也不属于元素自身尺寸的一部分，元素的总宽高不受轮廓线宽度影响

其值为像素值，表示轮廓线与边框之间的宽度。轮廓线类型由outline属性设置

oueline接收三个值: 像素值、样式(如实线虚线)、颜色

---

16、val() —— CSS变量

语法:val(--name, value),注意变量名必须以两个破折号--开头

作用: CSS变量可以访问DOM，于是可以使用js来修改变量，和基于媒体查询来修改变量.同时代码更易于理解、修改相关值更容易。

CSS变量分为全局变量和局部变量，全局变量在整个文档中都可以访问和使用，局部变量只能在声明它的选择器内部使用

变量声明:

• 全局变量: 在:root选择器中声明，:root选择器匹配文档的根元素
• 局部变量: 在要使用它的选择器中声明

实例：

//声明全局变量
:root{
    --color01: white;
    --color02: skyblue;
}

//使用全局变量
div{
    background-color: val(--color01);
}

//声明并使用局部变量
button {
    --buttton-color: purple;
    border: 2px solid val(--button-color);
}

覆盖变量

在选择器中声明一个和全局变量同名的变量时，同名的全局变量在该选择器内会被覆盖为局部变量，在该选择器内对该变量进行修改，不会影响到同名的全局变量

JavaScript修改CSS变量

为方便理解，这里注明var root = document.querySelector(':root')

方法	说明
getComputedStyle(root).getPropertyValue('变量名')	获取CSS变量的值
root.style.setProperty('变量名', '修改值')	修改CSS变量的值

以修改上面的变量为例：

var root = document.querySelector(':root');

//获取CSS变量
function getCSS() {
    var rs = getComputedStyle(root){
        console.log(rs.getPropertyValue('--color01'));
    }
}

//修改CSS变量
function setCSS() {
    root.style.setProperty('--color01','purple');
}

媒体查询中使用变量

在媒体查询中使用和修改CSS变量时，要加上其所在的选择器，比如：

@media screen and (min-height: 120px){
    :root {
        --color01: red;
    }
    button {
        --button-color: skyblue;
    }
}

17、box-sizing

该属性用于设置元素的总宽度和高度中包括内边距（填充）和边框

div{
    box-sizing: border-box;
}

//对所有元素使用
* {
    box-sizing: border-box;
}

18、Flexbox —— 弹性框布局

弹性框布局便于灵活设计响应式布局结构，而无需使用浮动、定位

使用该模型前，需要定义Flex容器 --> 在对应容器设置: display: flex

.flex-div {
    display: flex;
}

display: flex可继承，也就是说，如果父元素的display设置为了flex，那么其中的子元素都是弹性项目

flex容器属性	说明	值
flex-direction	堆叠弹性项目的方向	column-从上到下垂直、column-reverse-从下到上垂直、row-从左到右水平、row-reverse-从右到左水平
flex-wrap	对flex项目换行	wrap-必要时换行、nowrap-不换行（默认）、wrap-reverse-必要时以相反顺序换行
flex-flow	flex-direction和flex-wrap的简写属性	两个值，从左到右依次为flex-direction、flex-wrap的值
justify-content	对齐flex项目	center-中心对齐、flex-start-在容器的开头对齐（默认）、flex-end-在容器的末尾对齐、space-around-显示行之前之后和之后之后带有空格的flex项目、space-between显示行之间有空格的flex项目
align-items	垂直对齐flex项目	center-在中间对齐、flex-start-在顶部对齐、flex-end-在底部对齐、stretch-拉伸flex项目以填充容器（默认）、baseline-基线对齐
align-content	对齐弹性线	space-between-显示弹性线之间有相等的间距、space-around-显示弹性线在其之前之后和之后带有空格、stretch-拉伸弹性线以占据剩余空间（默认）、center-容器中间显示弹性线、flex-start-容器开头显示弹性线、flex-end-容器末尾显示弹性线

flex项目的完美居中

方法: 将justify-content和align-items都设置为center

flex项目的特有属性

属性	说明	值
order	设置flex项目的排列顺序	数字，默认为0
flex-grow	设置该flex项目相对于其他flex项目增长多少倍	数字，默认为0
flex-shrink	设置该flex项目相对于其他flex项目收缩多少倍	数字，默认为0
flex-basis	设置flex项目的初始长度	像素值
flex	以上三个属性的简写	从左到右顺序依次为以上三个属性从上到下顺序
align-self	设置弹性容器内所选项目的对齐方式，该属性会覆盖容器align-items属性的默认方式	center等

19、@media —— 媒体查询

CSS2中是用它为不同类型媒体定义不同样式，CSS3中可以检查媒体的许多样式信息，比如宽高、分辨率、方向等

CSS @media规则 参考手册

查询语法: @media not/only mediaType and (expresstions){ CSS代码 }

screenType	说明
all	用于所有媒体类型设备
print	用于打印机
screen	用于电脑、平板、手机等屏幕
speech	用于屏幕阅读器

@media screen and (min-width: 100px){
    #container{
        background-color: skyblue;
    }
}

如果指定的媒体类型与正在显示文档的设备类型匹配，并且媒体查询中的所有表达式均为 true，则查询结果为 true。当媒体查询为 true 时，将应用相应的样式表或样式规则，并遵循正常的级联规则。

通过媒体查询，我们可以根据不同的屏幕特点来灵活变更浏览器显示情况、排版等，让用户获得更好体验