1、background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。注意:背景色是不起作用的

2、background-clip背景剪裁属性是从指定位置开始绘制。也有三个值content-box, padding-box,和 border-box

3、css3渐变,渐变也支持透明度(transparent),可用于创建减弱变淡的效果。

   repeating-linear-gradient() 函数用于重复线性渐变,需要设置高度,和每个循环颜色的占高比例

#grad1 {
  height: 800px;
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

4、字体定义

@font-face{
font-family: myFirstFont; //规定字体的名称
src: url('Sansation_Light.ttf') //定义字体文件的 URL。
,url('Sansation_Light.eot'); /* IE9 */
}
div{
font-family:myFirstFont;
}

相当于是定义了一个字体变量,在稍后的css样式中引用此字体变量

5、2D和3D转换

transform(转换)是用于元素的转换属性,向元素应用 2D 或 3D 转换。属性值是一个函数,有:

  • translate()  移动
  • rotate()  旋转
  • scale()  缩放
  • skew()  倾斜
  • matrix()  混合转换

6、css3过渡动画,某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。使用元素属性transition(过渡)

有三点

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。
  • 最终触发时的状态
div{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}

div:hover{
width:300px;
}

要添加多个样式的变换效果,添加的属性由逗号分隔:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

注意:转换transform属性也可以用于过渡动画

7、@keyframes关键帧动画

实质就是使用@keyframes规则创建一个自定义的动画,然后使用css属性animation执行这自定义的动画名称

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s; //此处是使用自定义的动画
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

//以下是自定义动画名称
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
} @-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

0% 是动画的开始,100% 是动画的完成。

为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

注意一个属性animation-fill-mode,规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。即可以使动画停留在最后的状态

8、弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

利用弹性盒子水平垂直居中,flex弹性盒子的子元素水平和垂直方向都有流动性

.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
} .flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
}

9、多媒体查询

可以在css文件内使用,也可以在html内使用link标签引入不同的css文件

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3注意点的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  10. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

随机推荐

  1. C# 免客户端访问Oracle的DLL

    代码示例: OracleConnection con = new OracleConnection();               con.ConnectionString ="user ...

  2. 【读书笔记】iOS-iOS6 Passbook应用开发

    Passbook 是iOS6的新功能,只能在iPhone和iPod touch设备中使用,它可以帮助管理商家发放的电子会员卡,积分卡,优惠券等. 一,Passbook 与 Pass. Passbook ...

  3. 安装cuda8.0时无法安装.net Framework 4.0 错误的解决

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在win7 64位旗舰版(带sp1)上安装cuda时到安装Microsoft.NET Framework4.0,一直停 ...

  4. [我的阿里云服务器] —— WorkPress

    前言: WordPress是基于PHP和MYSQL编成的一套博客系统,因此一般会选择LAMP环境来让它最稳定地运行, 这里的LAMP指的是Linux.Apache.MySQL.PHP,我们我的阿里云服 ...

  5. go语言练习:指针

    指针是一个变量,存储的是另一个变量的地址 package main import "fmt" func main() { var a string = "hello&qu ...

  6. 树莓派上启动nfs server

    1. nfs 是什么 (略)http://vbird.dic.ksu.edu.tw/linux_server/linux_redhat9/0330nfs.php 2. 安装 nfs-kernel-se ...

  7. 在 Windows 上创建虚拟机规模集和部署高度可用的应用

    利用虚拟机规模集,可以部署和管理一组相同的.自动缩放的虚拟机. 可以手动缩放规模集中的 VM 数,也可以定义规则,以便根据资源使用情况(如 CPU 使用率.内存需求或网络流量)进行自动缩放. 在本教程 ...

  8. [Synology] [群晖] 关闭被占用的文件

    1. Control Panel: Control Panel > Terminal & SNMP Enable SSH service 2. SSH into Synology 3. ...

  9. ELF文件结构描述

    ELF目标文件格式最前部ELF文件头(ELF Header),它包含了描述了整个文件的基本属性,比如ELF文件版本.目标机器型号.程序入口地址等.其中ELF文件与段有关的重要结构就是段表(Sectio ...

  10. env :让系统决定你命令的位置

    如果我们使用lua 运行脚本程序,或者使用python执行程序.我们不用明确 python的位置,可以使用env 命令来运行: env 程序介绍: NAME env - run a program i ...