：像素相对长度：
em，相对于父元素字体或自身字体的大?。ū妒?。rem，相对于根元素<html>字体大?。ū妒?。如果用em、rem作为单位，建议根元素设置10px，便于计算 。vh/vw：视窗（浏览器可视窗口）高度、宽度的1%，可以把一些东西做得随浏览器的视口改变大小 。
width: 20em; /* 20个字符宽度 */font-size: 2em; /* 2倍大小 */font-size: 200%; /* 2倍大?。?同2em */height: 5vh; /* 浏览器页面窗口高度的5% */百分比：相对于其他值（大多是父元素）的比例 。- 字体大小设置百分比，就是相当于父元素字体大小的比例 。
- 宽度百分比，父元素宽度比例 。
属性描述min-height设置元素的最小高度，默认auto，当大于height会覆盖height的值max-height设置元素的最大高度，当小于height会覆盖height的值min-width设置最小宽度，默认auto，如果大于width会覆盖width的值max-width设置最大宽度值，如果小于width会覆盖width的值对于替换元素（图像和视频），他们有自己的大小，这会影响布局，可以通过设置
max-width:100%来控制其大小范围 。虽然设置width: 100%;也可以控制大小 ， 但会拉伸图片 。3.3、color颜色值RGB颜色是基于R（red）、G（green）、B（blue）三个颜色通道组合而成，每个颜色通道值0到255，16进制就是00到FF 。
颜色值描述颜色关键词：
red预定义的颜色值，如red、green、blue、transparent （透明色），完整列表16进制值RGB：#FF12AA#开头，6位16进制数值16进制RGBA：#FF12AAFF#开头，8位16进制数值，多了透明度A（alpha 通道）RGB函数：rgb(2, 121, 139)rgb三个值作为参数（10进制，0-255）函数RGBA：rgba(2,121,139,0.3)rgba4个值作为参数，最后一个参数透明度值是0到1的小数 。透明度属性：opacity0到1的小数 ， 在元素上设置对整个盒子生效currentColorcss3关键字，当前元素的（或其最近父元素）继承的color值p {color: blue;color: #FF0000;color: #FF00006F;color: rgb(255, 1, 1);color: rgb(255, 1, 1,0.4);opacity: 1;border: currentColor 1px dashed;}3.4、渐变色gradient渐变色gradient（/?ɡre?di?nt/ ）是一种特别的image数据类型，用于background-image、border-image的值，实现多种渐变颜色 。可以设置多组值 ， 逗号隔开，层叠渲染都会生效 。线性渐变linear-gradient()沿线性方向的颜色渐变：
linear-gradient (方向/角度 , 颜色 位置% , 颜色 位置% , ...)
- 方向/角度（angle），目的是确定线性渐变的方向，有两种设置方式：
- 角度（angle ， 顺时针），沿指针方向渐变，单位
deg（degree） 。 - 方向，关键字
to+ 一个或多个位置（top、bottom、right、left），to right /*从左到右*/
- 角度（angle ， 顺时针），沿指针方向渐变，单位
- 颜色值：颜色值color 。
- 插值位置：可以是%比例，和长度（px），基于方向的渐变插值位置 。
<div class="lg"><p>b1</p> <p>p2</p> <p>p3</p></div><style>.lg p{width: 100px; height: 80px; text-align: center;font-size: 20px; line-height: 80px; margin: 10px;display: inline-block;}.lg p:nth-child(1) {background-image: linear-gradient(red, blue 20%,green 60px);}.lg p:nth-child(2) {background-image: linear-gradient(45deg, red, blue);}.lg p:nth-child(3) {background-image: linear-gradient(to right, red 20px, blue 90%);}</style>
文章插图
径向渐变radial-gradient()从中心往四周辐射扩散的颜色渐变，（radial /?re?di?l/辐射、径向） 。
radial-gradient (形状 | sizeat 圆心位置 , 颜色 位置% , 颜色 位置% , ... )
- shape：径向渐变的图形形状，ellipse (默认)、circle （圆）
- at position：设置圆心位置（x、y坐标），可用x、坐标值，或方位两种方式：
- 坐标定位（像素、百分比）：
at 0 50%，at 10px 30px - 方位定位（top、bottom、right、left、center）：
at left top
- 坐标定位（像素、百分比）：
- size：渐变结束形状的大?。毒僦担篶losest-side、closest-corner、farthest-side、farthest-corner
<div class="rg"><p>b1</p> <p>p2</p> <p>p3</p> <p>p4</p></div><style>.rg p { width: 100px; height: 80px; text-align: center; font-size: 20px;line-height: 80px; margin: 10px; display: inline-block;}.rg p:nth-child(1) {background-image: radial-gradient(black 6px,black 10px,red,white)}.rg p:nth-child(2) {background-image: radial-gradient(circle at center,black 6px,black 10px,red,white);}.rg p:nth-child(3) {background-image: radial-gradient(at 0 80px, black 6px,black 10px,red,white);}.rg p:nth-child(4) {background-image: radial-gradient(farthest-side at 0 80px, black 6px,black 10px,red,white);}</style>
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- CSS 动画一站式指南
- 怎么看电脑配置高低（100个电脑基础知识)
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
- CSS 渐变锯齿消失术
- 1 人人都懂的HTML基础知识-HTML教程
- Redis 02: redis基础知识 + 5种数据结构 + 基础操作命令
- Docker_基础知识
- 前端开发日常——CSS动画无限轮播
- Vue3 JS 与 SCSS 变量相互使用
