| 代码 | | 用法 | 备注 |
| 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针对第二张图片 */
| |
| | | | |