CSS3特性总结

1.文本阴影text-shadow

text-shadow:偏移量x 偏移量y  模糊度  颜色;

注意:

水平偏移量: 正值向右,负值向左

垂直偏移量:  正值向下,负值向上

模糊度不能为负数

可设置多个text-shadow,每个用逗号分隔

例子:text-shadow:1px  2px  3px  red,2px  3px  4px  pink;

2.边框圆角 border-radius

border-radius:10px 10px 10px 10px/5px 5px 5px 5px;

前面四个是横轴半径,后面四个值是纵轴半径,如果后面四个值不写,纵轴半径默认等于横轴半径

3.盒子阴影 box-shadow 

水平偏移量 +向右 -向左

垂直偏移量 +向下 -向上

模糊度不能为负数

inset可设置内阴影,box-shadow:inset 1px 1px 1px red;

设置box-shadow不会改变盒子大小,不会影响兄弟元素布局

可设置多重边框阴影,增强立体感

4.边框图片boeder-image

路径:border-image-source:url();

图片拆分:border-image-slice:30 30 30 30;//上 右  下 左

 border-image-slice:30 fill;

以上,会将中间裁掉的部分在盒子内平铺

图片拉伸:

border-image-repeat:stretch //默认的拉伸效果

repeat //平铺,不完整显示

round //完整的平铺

边框图片宽度:

border-image-width:并不能改变盒子大小,只能改变边框图片大小

最终的连写:

border-image:url() slice/width repeat;

5.背景大小 background-size

作用:设置背景图片大小

设置方式:background-size:200px  200px; //具体尺寸

     100%  100%; //比例

     100%  auto; //自适应

      auto   100%; //自适应

     cover; //铺满父容器

contain //在父容器中完整显示

6.设置背景原点background-origin

作用:设置背景图片原点位置,这个原点,指的是图片左上角

  也就是重新定义了background-position的显示位置

应用background-origin:content-box;   //以内容左上角为原点

    padding-box; //默认选项,以内边距为原点

    border-box; //以外边距为原点

7.background-clip背景区域裁切(也就是让图片在什么区域内显示)

作用:裁切背景,移动端应用的多

应用:background-clip:padding-box; //padding以外的部分会被裁掉

     border-box; //border以外的部分会被裁掉

     content-box; //content以外的部分会被裁掉

8.多背景background: url()  ,url(),url();

注意:不同的背景,用逗号分隔

 设置多背景的时候,不能再设置背景颜色(不能连写),如有需要,聚单独写background来设置颜色

9.渐变

线性渐变:background-image:linear-gradient(渐变方向开始和结束状态,渐变范围(距离))

渐变方向:可以是具体方向:to  top

to bottom

to left

to  right

也可以是角度:90deg

例子:

background-image:linear-gradient(

to  right, //从左向右

red  20%, //开始颜色是红色,从盒子宽度20%的位置开始变

green //结尾颜色是绿色

);

注意:如果没有设置background-size,百分比是以盒子宽度为参照设置的,否则是以background-size为参照设置的;

10.径向渐变background-image:radial-gradient(圆点,开始、结束)

注意:径向渐变的百分比是以设置的半径为参照的

圆心位置设置:关键词:center/left.......

具体值:第一个值代表水平方向,第二个垂直,第二个如果不设置,默认Center 

例子:

background-image:radial-gradient(

100px  50px  at center, //第一个是水平半径,第二个是垂直半径,第三个是圆心,意思是在盒子中心

red  20%, //在圆的半径20%的位置开始变

green

);

11.过渡trasition

11.1补间动画

过渡属性:transition-property:all //默认全部

width

htight

.....多个属性用逗号分隔

过渡执行总时间:transition-duration:  ;

动画执行速度(类型)transition-timing-function:linear //匀速

   ease

   ease-in

  ease-out

 ease-in -out

动画延时时间:transition-delay:  ;

注意:transition一般放在开始状态里。

11.2帧动画

12.2D转换

transiform:translate(x,y) //第一个值是水平,第二个垂直

旋转:transform:rotate(deg); //正值是顺时针,负值是逆时针

缩放:trasorm:scale(倍数); //整数(>1)放大,小数(<1)缩小

倾斜:transform:skew(deg,deg); //水平,垂直

旋转原点:transform-origin:center; //默认

left;

right;

bottom;

top;

13.3D转换

左手法则:左手握住旋转轴,拇指指向旋转轴方向,四指指向的方向就是正方形。

13.1 3D转换分类

transform: translateX() translateY() translatrZ(); //位移

例子:

transform:translateX(100px) translateY(100px)   translateZ(100px);

 

transform:rotateX() rotateY() rotateZ(); //旋转

transform:scaleX() scaleY() scaleZ(); //缩放

14.透视  perspective

作用:辅助了解3D效果,不是必须的步骤

取值:600-1200px是人眼最舒服的状态

设置方式:将该属性作为父元素的单独属性设置

将perspective作为transform的属性设置

transform:perspective(100px) translateX(100px);

15.动画

语法:

@keyframes scale{

from{}

to{}

}

通过animation:;调用动画,哪个元素调用,就写在哪里。

调用动画名称:animation-name:;

设置动画完成时间:animation-duration:;

设置动画执行次数:animation-interation-count:infinite; //一直执行

   具体时间,如2s

   默认执行1次

设置延时执行时间:animation-delay:;

动画执行类型(速度):animation-timing-function:linear;

ease;

ease-in;

ease-out;

ease-in-out;

动画逆波(是否有反向运动):animation-direction:normal;

reverse; //反向

alternate; //正常执行

alternate-reverse;

设置动画时间之外的状态:animation-play-state:running; //默认

    paused; //暂停

转为3D盒子:transform-style:preserve-3d;

steps(); //步长


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值