---------文字描边/填充
text-stroke: --px color; 描边宽度 颜色
text-fill-color: color; 填充颜色
---------文字模糊/阴影
text-shadow: --px --px --px color , --px --px --px color;
水平位置 垂直位置 阴影模糊大小 阴影颜色 可叠加
---------背景阴影
box-shadow: x(必写) y(必写) blur spread color inset/outset;
水平(-右+左) 垂直(-上+下) 模糊距离 阴影大小 颜色 内/外显示
---------多重阴影
box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 3px 0px #1f3053, 0 4px 4px 1px #111111;
inset/outset:内外阴影
---------背景透明度
background: rgba(0-255, 0-255, 0-255, 0-); 背景透明底(不继承)
opacity:0-1; 背景透明底(继承)
filter:alpha(opacity=0-100); (兼容写法)
---------背景渐变色
Linear-gradient: 线性渐变
background: -webkit-linear-gradient( left , red , blue ) 可设置多个颜色
(方向left/top , 1颜色/start, 2颜色, 3颜色, ...多个颜/stop)
-webkit- :浏览器支持 –moz- -o-
background: -webkit-linear-gradient( left , red --% , blue --% )
red --% :1色起始位置 100%为红
blue--% :2色起始位置 1%位兰
blue :结束色 长度为100% - (red% + blue%)
background: -webkit-linear-gradient( --deg , red , blue )
0deg –右 45deg –右上 90deg –上 135deg—左上 180—左
0deg –右 -45deg –右下 -90deg –下 -135deg—左下 -180—左
Radial-gradient: 径向渐变
background: -webkit- Radial-gradient ( ---px , red , blue , …)
--px: 焦点距离 (left方位可写)
repeating-linear-gradient: 重复渐变
repeating-radial-gradient: 重复径变
repeating-radial-gradient(circle closest-side, #f00, #ff0 10%, #f00 15%);
circle closest-side 2个值指定位置
circle--: 圆心
closest-side: 圆外侧
---------边框框倒角
border-radius:0 – 99999px/ 0-100%/ em / rem; 四边倒角(50%为圆)
border- top-left-radius: 0 – 99999px/ 0-100%/ em / rem; 单个倒角
border-radius: --px –px –px –px ; 四个值: 左 右 下 左
---------边框图片
border-width: --px;
border-image: url(‘images/flow2.jpg‘) -- -- round/stretch ;
背景图片路径 向内移动高度 向内移动宽度 平铺/拉伸
注意:边框宽度调整图片宽
原理:图片4个角按设置尺寸加载图片，图片以向内移动的尺寸均匀显示在边框中
---------边框渐变
border: --px solid;
border-image: -webkit-linear-gradient(位置 , color %, color, ..) –px –px;
--px: 边框高宽
---------过渡效果
Transition: property duration delay timing-function
对象 持续时间 延迟 贝塞尔曲线(运动方式)
transition: width ,height --s ease;
多个属性
transition: all --s ease;
全部属性
all /none – 选择全部变化的属性/无过度 可单选属性width height …
--s – 过度时间
Ease – 变慢方式 ease/逐渐变慢 linear/匀速 ease-out/减速
Ease-in-out/加速然后减速
hover{ transition: all 5s;}:
恢复没有过渡效果
delay:
开始恢复都有过度效果
作用的属性:
vstart() 开始值
vres() 过度值
vend() 结束值
p 过渡函数输出值
vres=(1-p)*vstart+p*vend(正直可过度)
可过度:line-height,text-algin,opacity.shadow, width,height ,backgroun-colo,color,位置移动
无过度:dispaly
---------动画效果
动画定义
animation: name duration delay timing-function iteration-count direction play-state fill-mode
名字 运行时间 延迟 运动曲线 播放次数 往复方式 播放暂停
之前之后效果
运动描述 线性
@keyframes name
{
From{ : ;}
To{ : ; }
}
运动描述 关键帧
@-webkit-keyframes skyset {
0% { background: red;}
50%{ background: blue}
100% {background: yellow;}
}
animation: --1 --2 –3 –4 –5 –6 –7 --8 ;
--1:动画名字
--2:运行时间
--3:运行模式(同过度) + steps()函数 steps( -- )
--4:开始之前的延迟
--5:播放次数 n次数 infinite循环
--6:动画运行方向 normal 默认正常方向alternate 轮流方向播放
--7:动画暂停 paused暂停动画 running播放动画
--8:关键帧控制none不改变默认 forwards播完保留最后一个属性
Backwards仅留第一个显示状态 both前后填充模式都采用
@-webkit-keygrames mymove {} 兼容谷歌
@-moz-keygrames mymove {} 兼容火狐
动画加载
.select:hover {
animation: name --s ease infinite;
}
@keyfarmes name {
}
实例
.box {
animation: mymove 5s infinite;
/*-- 动画定义: 名字 时间 循环--*/
}
@keyframes mymove { /*-- 动画效果 --*/
from {left:0px;}
to {left:200px;}
}
---------边框多色
-moz-border-bottom-colors: red blue yellow;
从外向里 一个颜色1px宽度，剩余宽度显示最后颜色 (只有火狐浏览器支持)
---------倒影
box-reflect: none direction(倒影位置) offset(倒影距离) mask-box-image(倒影遮盖);
none-- 有无
direction-- above/ below/ left/ right 上 下 左 右
offset-- 倒影距离
例:
-webkit-box-reflect: below 10px -webkit-linear-gradient(top , rgba(255, 255, 255, 0.0) 10% , rgba(255, 255, 255, 0.2) , rgba(255, 255, 255, 0.6) );