边框相关属性
- box-shadow (边框阴影)
- h-shadow 水平阴影距离
- v-shadow 垂直阴影距离
- blur 可选,模糊距离
- spread 可选,阴影尺寸
- color 可选,颜色
- inset 可选,将当前阴影修改为内阴影
- box-shadow: h v blur spread color inset
- border-image (图片边框)
- border-image-sourse 图片路径
- border-image-width 图片边框的宽度
- border-image-repeat
- 取值
- repeat 平铺
- round 铺满
- stretch 拉伸
- 取值
- border-image: source width repeat
- outline (轮廓)
- outline-width 轮廓宽度
- outline-style 轮廓样式
- outline-color 轮廓颜色
- outline: width style color
背景相关属性
- background-size
- width height
- width% height%
- cover 扩大背景图像,使背景图完全覆盖背景区域,直到碰到最后一个边缘才停止
- contain 扩大背景图像,碰到第一个边缘就停止
- background-attenchment
- scroll 默认,滚动定位
- fixed 固定定位
- background-position (背景图像显示位置)
- x% y%
- x y (可分别取defined,也可取绝对单位)
- Defined数值left right top bottom center
- background-clip (背景剪裁区域)
- border-box 背景被剪裁到边框,默认值(边框的外围)
- padding-box 背景被剪裁到内边距框(内边距框的外围)
- content-box 背景被剪裁到内容区
- background-origin (背景图像绘制区域)
- border-box 背景从边框开始绘制
- padding-box 背景从内边距开始绘制
- content-box 背景从内容区开始绘制
- 背景合并
- background: color url() repeat attachment potision;
- background: url() repeat position;
- background渐变
- 渐变分类
- 线性渐变
- 径向渐变
- 重复渐变
- 注意,所有的渐变都是通过background-image设置的
- 线性渐变 linear-gradient
- 径向渐变 radial-gradient
- 重复线性 repeating-linear-gradient
- 重复径向 repeating-radial-gradient
- background-image: linear-gradient();
- 线性渐变
- linear-gradient(angle,color1,color2,…)
- angle取值
- defined值 to top , to bottom , to right
- 0deg->to top
- 90deg->to right
- 180deg->to bottom
- color (渐变颜色的开始点，过渡点，结束点)
- red 0% 从开始处显示红色
- greed 50% 从50%处显示绿色
- blue 100% 从100%处显示蓝色
- angle取值
- linear-gradient(angle,color1,color2,…)
- 径向渐变 (默认形状为椭圆形)
- radial-gradient([size at position],color1,color2,…)
- size at position
- size 放射的圆形的半径
- position 原点所在的座标
- left
- right
- top
- bottom
- center
- 示例代码
background-image: radial-gradient(50px 150px at 200px 150px,red,green);
- size at position
- radial-gradient([size at position],color1,color2,…)
- 重复渐变
- 含义: 非重复渐变下,当终止色不在100%边缘时(如60%),此时60%到100%将由终止色填充；在重复渐变下,当终止色不在100%边缘时,会在终止色绘制完毕后重新从起始色绘制
- 渐变分类
字体相关属性
- font-varient
- small-caps 英文字母转换为小型大写字母
- font-style
- italic 中英文皆转换为斜体
文本相关属性
- text-decoration
- none 无样式
- underline 下划线
- overline 上划线
- line-through 删除线
- text-indent 首行缩进
- value 具体值,指缩进的距离
- text-shadow
- text-shadow: h-shadow v-shadow blur color;
- 提示: 前三值均为具体值,如2px
- text-overflow (该属性必须与overflow:hidden联用)
- clip 裁剪
- ellipsis 通过…来表示未显示的内容 （此时需要设置white-space: nowrap;）
转换相关属性
- 什么是转换
- 转换即改变元素的一些状态、大小、位置、形状
- 可以是2d转换, 也可以是3d转换
- 2d, 使元素在x轴和y轴上发生变化
- 3d, 2d基础上增加了z轴的变化
- 转换属性
- transform:none(默认)/transform-function;
- transform-function 要实现转换的函数
- translate() 位移
- scale() 缩放
- rotate() 旋转
- skew() 倾斜(此函数w3school译为翻转, 我认为不准确)
- matrix() 矩阵函数, 可实现多种效果
- 转换原点 (这里w3school译文也不准确)
- 即转换的过程中围绕的中心点, 默认情况下, 原点是整个元素的中心处
- 更改转换原点
- transform-origin
- 取值: 以元素左上方(0,0)为中心点, 计算其他点
- 数值
- 百分比
- 关键字: left/right/top/bottom/center
- 赋值:
- 一个值: x轴的移动
- 两个值: x轴和y轴
- 三个值: x, y, z轴
- 取值: 以元素左上方(0,0)为中心点, 计算其他点
- transform-origin
- translate() 2d位移
- translate(x,y)
- translate(value) value同时指代x, y
- 取值
- 数值
- 百分比
*单向位移
- translateX(x)
- translateY(y)
- 取值
- scale() 2d缩放
- scale(value) value同时指代x, y
- scale(x,y)
- 取值
- 默认值 1
- 0以上数字
- 取值
- scaleX(x)
- scaleY(y)
- rotate() 2d旋转
- rotate(deg)
- deg为角度0-360
- 默认为顺时针旋转
- 负值时为逆时针旋转
- rotate(deg)
- skew() 2d倾斜
- 该倾斜实际上为是元素发生2d形变
- skew(deg,deg)
- 第一个deg为横轴不动, 数轴发生一定角度的倾斜(结果高度不变,宽度变化)
- 第二个deg为竖轴不动, 横轴发生一定角度的倾斜(结果宽度不变,高度变化)
- skewX(x)
- skewY(y)
- matrix() 矩阵变化
- 矩阵变化有6个参数, 暂命名为(a,b,c,d,e,f),允许进行旋转、缩放、移动、倾斜
- 前两值以矩形框左边为轴,中两值以矩形框上边为轴, e为左右位移值, f为上下位移值(位移值单位为px)
- a为横向缩放, 默认值为1, 0-1时为缩小, >1时为放大, 负值时以左边为轴发生翻转, 缩放效果同正值
- b为纵向倾斜, 默认值为0, 值可正可负
- c为横向倾斜, 默认值为0, 值可正可负
- d为纵向缩放, 默认值为1, 0-1时为缩小, >1时为放大, 负值时以上边为轴发生翻转, 缩放效果同正值
- 3d转换
- 属性:
- perspective: 设置人眼到投影平面的距离(只影响3d元素,不影响2d元素)
- 设置位置: 加在父元素上, 完成后其子元素就可以完成3d转换
- 3d旋转
- 属性: transform
- 函数:
- rotateX(deg)
- rotateY(deg)
- rotateZ(deg)
- rotate3d(x,y,z,deg)
- x,y,z的取值为1, 0, -1
- rotate3d(-1,0,1,45deg)
- 属性: