css3高级样式

-----CSS3高级样式---

---------文字描边/填充

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(circleclosest-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 delaytiming-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 delaytiming-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) );