颜色透明度
属性 | 描述 |
---|
color: rgba(255, 255, 255, 0.5); | RGB透明度 |
opacity:0.5; | 通用透明度(整体) |
边框属性-border
基本属性 | 描述 |
---|
border-width | 宽度 |
border-style: | 样式 |
border-color: | 颜色 |
border:5px solid red; | 简写属性 |
border-radius | 圆角 |
- 边框的样式:
样式属性 | 介绍 |
---|
none: | 默认无边框 |
dotted | 定义一个点线边框 |
dashed: | 定义一个虚线边框 |
solid: | 定义实线边框 |
double: | 定义两个边框。 两个边框的宽度和 border-width 的值相同 |
groove: | 定义3D沟槽边框。效果取决于边框的颜色值 |
ridge: | 定义3D脊边框。效果取决于边框的颜色值 |
inset: | 定义一个3D的嵌入边框。效果取决于边框的颜色值 |
outset: | 定义一个3D突出边框。 效果取决于边框的颜色值 |
过渡属性
简写属性 | 描述 |
---|
transition: width 1s linear 2s; | 宽度变化持续2秒,延直线触发时间2s |
transition: width 2s, height 2s; | 多属性用逗号隔开 |
- 样式属性
属性 | 描述 |
---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 |
transition-property | 规定应用过渡的 CSS 属性的名称。 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 |
transition-delay | 规定过渡效果何时开始。默认是 0。 |
-三大过渡属性
scale属性(缩放) | 描述 |
---|
scale(数值) | 定义倍数缩放,>1放大,<1缩小 |
scaleX() | 通过x轴定义,仅水平方向缩放 |
scaleY() | 通过y轴定义,仅垂直方向缩放 |
scaleZ() | 通过z轴定义,定义3d缩放 |
例如:transform: scale(2); X、Y分别放大两倍
translate属性(移动) | 描述 |
---|
translate() | 相当于水平平移,+ 表示向右/下,- 表示向左/上 |
translateX(x) | 水平方向平移 |
translateY(y) | 垂直方向平移 |
translateZ(z) | 相当于放大 |
translate(x,y) | 相当于水平平移+垂直平移 |
translate(x,y,z) | 相当于水平平移+垂直平移+放大 |
例如:translateX(100px)水平向右平移100px
rotate(旋转) | 描述 |
---|
rotate(angle) | 定义2D旋转 |
rotateX(angle) | |
rotateY(angle) | |
rotateZ(angle) | |
rotate3d(angle) | 定义3d旋转 |
例如:transform: rotate3d(1, 0, 1, -180deg);顺时针旋转消失
动作类
a:link | 正常,未访问过的链接 |
a:visited | 用户已访问过的链接 |
a:hover | 当用户鼠标放在链接上时 |
a:active | 链接被点击的那一刻 |
--end--