| 代码 | | 用法 | 备注 |
| position | 定位方式 | position：relative;
position: absolute;
| |
| width | 宽度 | width: 1400px; | |
| height | 高度 | | |
| left | 左边位置 | left: -600px; | |
| right | 右边位置 | | |
| top | 顶部位置 | | |
| bottom | 底部位置 | | |
| background | 背景图 | background: url('图片地址')"; | |
| border |
|
| /* border-* 属性四个值对应的边框顺序 ：上右下左 */
|
| border-style | 边框样貌 | dashed（虚线）、dotted（圆点）、double（双线）、groove（雕刻）、ridge（浮雕）、inset（凹陷）、outset（凸起）、hidden（隐藏）、none（无）等，还是挺丰富的；厚度除了实体数值，还有关键字 thick（厚）、thin（薄） | border-style: solid dotted dashed groove;
border-style: double dotted;
border-style: dotted double solid; |
| border-width | 边框厚度 | border-width: 3px 6px 12px 8px; |
|
| border-color | 边框颜色 | border-color: red green blue cyan; |
|
| border-radius | 边框角半径 | #mybox1 {
width: 300px;
height: 300px;
border: 2px groove cyan;
border-radius: 0 50% 0 100%;
/* 值为 0 时可以省略单位符号 */} | border-radius: 50%;
当 border-radius 的值设为单值 50% 或 100% 都会得出圆形的形状，但是，当 border-radius 是多值时只有所有值都设为 50% 或宽高像素尺寸的一半时才得到圆形 |
| | | | |
| | | | |
| |
|
| |
| span | 行内包裹元素 | | |
| img | 图片 | <img id="" alt="" src="" /> | 属性 alt="" 是为了代码合法需要 |
| audio | 音频 | <audio id="aud" src="音频地址" autoplay loop></audio> | |
| video | 视频 | | |
| no-repeat | 图片不重复 | | |
| center / cover | 位置居中，即居于帖子元素的中央，图像的大小是 cover，
cover 用来表示背景图像的尺寸是封面式尺寸 | background: url('图片地址') no-repeat center / cover; | |
| margin | 元素的外边距属性
定义元素上、右、下、左四个边缘 | margin: 230px 0 30px calc(50% - 730px); | |
| nth-of-type() | 伪类选择器 | | 第四讲 |
| @keyframes | 关键帧动画选择器 | @keyframes rot {
from { transform: rotate(0deg); }从 0 度开始旋转 /*
to { transform: rotate(360deg); } /* 到 360 度 | #mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 10px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
/* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
animation: rot 8s linear infinite;}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */} |
| transform | | 旋转（rotate）、
平移（translate）、
缩放（scale）、
扭曲（skew） | |
| linear | 是匀速之意 | | |
| ease | 如果缺省则采用 ease 即两头慢中间快 | | |
| infinite | 无穷 | | |
| pointer-events: none; | 限制鼠标事件及对覆盖元素层进行穿透 |
| |
| *-gradient() | 渐变 | | |
| linear-gradient() | 线性渐变函数 | background: linear-gradient(to left, red, green, blue); /* 自右向左 */
background: linear-gradient(to bottom left, red, green, blue); /* 自右上到左下 */
background: linear-gradient(135deg, red, green, blue); /* 135度 */ | 默认为 to bottom自上而下，即第一个出现的颜色在上边，最后一个颜色在下边， 或 0deg 即0度。角度的可选关键字值还有
to top（自下而上）、
to right（自左而右）、
to left(自右向左)，还有一系列的
to top right（自左下向右上）组合法 |
| radial-gradient | 径向渐变 | background: radial-gradient(green, tan);默认
background: radial-gradient(circle, green, tan);变是以圆形展开的
background: radial-gradient(circle at 30% 20%, gold, green, tan);设置渐变的中心，用 at
background: radial-gradient(gold 10%, green 11% 20%, tan 21% 30%, teal 31% 40%, cyan 41% 50%, transparent 51%);
border: 1px solid gray; /* 边框用于观察 */ |
|
| repeating-radial-gradient | 重复性径向渐变 | .rbox5 {
width: 300px;
height: 300px;
background: repeating-radial-gradient(green, green 5%, red 6%, red 10%);} | |
| conic-gradient() | 锥形渐变 | background: conic-gradient(red, green, yellow); | |
| | | | |
| CSS阴影 | | | |
| box-shadow | | box-shadow: 2px 4px 6px gray; | 第一、二个参数是阴影在X、Y轴上的偏移距离，阴影的朝向，X偏移为负数时向左、正数时向右，Y偏移为负值是向上、正数是向下。
第三个参数是阴影模糊半径，默认值0，不能为负数，值越大阴影越大、越淡。
第四个参数是阴影颜色，支持浏览器支持的任何颜色表示法。 |
| | 内阴影参数 inset | box-shadow: inset 0 0 50px skyblue, 0 0 0 1px blue;
阴影可以无限多重，全放在 box-shadow 属性里，各组阴影表达语句之间用小角逗号隔开 | |
| | CSS滤镜 filter 的 drop-shadow() | filter: drop-shadow(200px 0 0 pink) drop-shadow(400px 0 0 blue);
/* 用空格隔开多组阴影语句 */ | |
| 文本的CSS | | | |
| padding: | 元素的内边距 | | |
| | | font: bold 2em/2.4em sans-serif;
/* 文本语法糖设置 ：粗细 + 尺寸/行间距 + 字体 */
color: plum; /* 文本颜色即前景色 */ | |
| | | text-shadow: 2px 2px 4px #000;
/*文本阴影属性 ：X偏移量 + Y偏移量 + 模糊半径 + 颜色 */
border: 1px solid gray; /* 边框用于观察 */ | |
| CSS伪元素 ::before 和 ::after | | .pbox2 {
width: 400px;
height: 100px;
border: 1px solid gray;
background: white;
position: relative; /* 父元素相对定位 */}
.pbox2::before {
content: '::before 伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: tan;
width: 40%;
height: 80%;}
.pbox2::after {
content: '::after伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: teal;
width: 40%;
height: 100%;
right: 0;} | |
| content | 内容之意 | | |
| | | | |
| | 双背景 | background: url('https://638183.freep.cn/638183/t22/51/g3.jpg') no-repeat center/cover,
url('https://638183.freep.cn/638183/t22/51/g4.jpg') no-repeat center/cover,
olive;
background-blend-mode: darken, lighten; /*背景融合滤镜 ：darken作用于第一张图片，lighten作用于第二张图片 */
| |
| | | /* CSS代码 ：盒子多背景设置举例 */background-color: rgb(128,128,0); /* 背景颜色 */
background-image: url('图片地址1'), url('图片地址2'); /* 背景图片 ：两张 */
background-repeat: no-repeat, repeatX; /* 背景重复 ：第一张不重复，第二张X轴方向重复 */
background-position: 0 0, 50% 50%; /* 背景位置 ：第一张从左上角开始，第二张居中 */
background-size: cover, 100% 100%; /* 背景尺寸 ：第一张以封面样式伸缩，第二张按盒子尺寸伸缩 */
/* 以上代码等价于如下语法糖格式 */
background:
url('图片地址1') no-repeat 0 0/cover,
url('图片地址2') repeatX center/cover，
rgb(128,128,0);
/* 多张图片做背景时如果有重叠，则只显示最第一张图片背景 */
/* 所以应考虑使用什么方法解决问题，比如使用背景融合滤镜 */
background-blend-mode: 值1, 值2; /* 值1针对第一张图片，值2针对第二张图片 */
| |
| | | | |
楼主: 绿叶清舟
楼主
显身卡
发表于 2021-5-21 21:03
发表于 2021-5-25 20:36
