阴影

box-shadow:水平偏移 垂直偏移;   偏移可以负值
box-shadow:水平偏移 垂直偏移 颜色;
box-shadow:水平偏移 垂直偏移 模糊值 颜色; /*最常见的*/
box-shadow:水平偏移 垂直偏移 模糊值 外延值 颜色;

背景

background-size: cover / contain / 400px 300px / 100% 100%
background: color image postion/size repeat attachment

CSS3变换

  • transform

    translatex()
    translatey()
    translate(x, y)
    rotate() 角度 deg
    skewx() 角度deg
    skewy()
    skew(x, y)
  • transform-origin 变换的原点。 对translate没有意义。 对rotate影响大

过渡效果

哪些CSS属性可以过渡
长度 (padding margin width height  left/top/right/bottom border-width  background-position ...)
颜色
变换
纯数字 (opacity、z-index)
触发过渡
伪类触发  :hover  :focus  ....
媒体查询 @media
JS
相关属性
transition-property  指定要过渡的属性 用,隔开。默认是 all
transition-duration 过渡持续时间
transition-timing-function 过渡线性效果 默认 ease
transition-delay 过渡延迟
transition:property timing-function duration delay

CSS3动画

关键帧
@keyframes 动画名字 {
0% { }
20% { }
40% { }
100% { }
}
相关CSS属性
animation-name  指定动画的名字
animation-duration 动画的执行时间
animation-timing-function 执行效果速度
animation-delay 延迟
animation-iteration-count 循环 次数 infinite(无限)
animation-direction: alternate (正向 反向 交替)\ reverse(反向)
animation-play-state: running / paused
animation 复合属性

CSS3新增属性2的更多相关文章

  1. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  2. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  3. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  4. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  5. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  6. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

  7. 第七篇、CSS3新增属性

    <!-- 1.透明度 opacity(设置不透明度):0.2: --rgba --background-color:rgba(255,0,0,0.8); 2.块阴影和圆角阴影 --box-sha ...

  8. CSS3 新增属性

    1Css3概述 从2010年开始,HTML5与CSS3就一直是互联网技术中最受关注的两个话题. 从前端技术的角度可以把互联网的发展分为三个阶段:第一阶段是web1.0以内容为主的网络 前端主流技术是H ...

  9. 深入了解——CSS3新增属性

    CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...

随机推荐

  1. HTML5 Canvas时间效果

    Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...

  2. socket编程中write、read和send、recv之间的区别~转载

    socket编程中write.read和send.recv之间的区别   http://blog.csdn.net/petershina/article/details/7946615 一旦,我们建立 ...

  3. ThinkSnS v4后台任意文件下载漏洞

    漏洞文件: /apps/admin/Lib/Action/UpgradeAction.class.php 主要问题还是出现在了180行直接将远程获取到的图片直接保存. 文中可见并没有做任何的对$dow ...

  4. Win7(64bit)搭建SVN

    开始: 第一步:下载SVN客户端程序TortoiseSVN并安装(不习惯英文操作界面的顺便在最底下下载一个语言包),下载地址tortoiseSVN下载(由于系统是64位的,我下载的是TortoiseS ...

  5. 最简单的基于FFMPEG的图像编码器(YUV编码为JPEG)(转)

    原文转自 https://blog.csdn.net/leixiaohua1020/article/details/25346147/ 伴随着毕业论文的完成,这两天终于腾出了空闲,又有时间搞搞FFMP ...

  6. 【Python学习笔记】使用Python计算皮尔逊相关系数

    源代码不记得是哪里获取的了,侵删.此处博客仅作为自己笔记学习. def multipl(a,b): sumofab=0.0 for i in range(len(a)): temp=a[i]*b[i] ...

  7. 详见github

    本栏博客不再专门更新,详见:https://github.com/dxscjx123/LeetCode

  8. python基础===tkinter学习链接

    http://effbot.org/tkinterbook/tkinter-classes.htm

  9. 【bzoj4530】大融合(LCT的子树维护)

    LCT维护子树并没有想象中的那么难,在这里只是复习下. (其他的维护子树的题目,可见:“共价大爷游长沙”) 只要记录下虚边连接的信息就好了. #include<bits/stdc++.h> ...

  10. [LabVIEW架构]ActorFramework(一)

    前言 小黑结婚回来第二周了,每天忙于程序设计,时间比较紧张,所以文章一直没出来,也算憋大招了. 近期小黑将与大家一起认识一下ActorFramework,既是对自己一段时间写AF程序的总结,也是梳理, ...