CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

CSS3给我们带来了什么好处呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

一、圆角（border-radius）是向元素添加圆角边框。

      border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */

二、阴影 （box-shadow）

　　box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

　　

　　注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

　　.box_shadow
　　　　{
　　

box-shadow:4px 2px 6px #333333 inset;
　　

}

　　添加多个阴影：

　　以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：

　　.box_shadow{
box-shadow:3px 2px 5px #f00, -3px -2px 5px #000, 0px 0px 12px 5px #33CC00 inset;
}

三、边框应用图片（ border-image）

　　border-image的语法：

　　

代码：

　　#border_image {
　　　　margin:0 auto;
　　　　height:100px;
　　　　line-height:100px;
　　　　text-align:center;
　　　　font-size:30px;
　　　　width:450px;
　　　　border:15px solid #ccc;
　　　　border-image:url(images/1.jpg) 70 repeat;
　　}
　　<div id="border_image">
　　　　 请为我镶嵌上漂亮的画框吧
　　</div>

四、颜色

background-color:rgba(100,120,60,0.5);

五、渐变色彩

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。

　　参数：

　　　　

　　用法：

　　

六、 文字与字体

　　text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

七、文本阴影text-shadow

八、1、（background-origin）设置元素背景图片的原始起始位置。

background-origin ： border-box | padding-box | content-box;

2、background-clip         用来将背景图片做适当的裁剪以适应实际需要。

　　　 background-clip ： border-box | padding-box | content-box | no-clip

　　3、background-size    设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。

　　　　background-size: auto | <长度值> | <百分比> | cover | contain

　　　　取值说明：

　　　　1、auto：默认值，不改变背景图片的原始高度和宽度；

　　　　2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

　　　　3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

　　　　4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

　　　　5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

　　4、multiple backgrounds　　　　

　　　　.demo{
　　　　　　width: 300px;
　　　　　　height: 140px;
　　　　　　border: 1px solid #999;

　　　　　　background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
　　　　　　url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
　　　　　　url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
　　　　　　background-position: left top, 120px 0, 230px 0;
　　　　　　background-repeat: no-repeat, no-repeat, no-repeat;

　　　　　　margin:0 0 20px 0;
　　　　}

　　　　

　　　　.task {
　　　　　　width: 300px;
　　　　　　height: 140px;
　　　　　　border: 1px solid #999;

　　　　　　background:url(http://static.mukewang.com/static/img/logo_index.png) no-repeat left top/80% 40%,
　　　　　　url(http://static.mukewang.com/static/img/logo_index.png) no-repeat right bottom/50% 50%;
　　　　}

　　九、 css3属性选择器

　　　　1.属性选择器

　　　　     <style type="text/css">　　

　　　　　　a[class^=column]{

　　　　　　background: red;
　　　　　　color:#fff;
　　　　　　}
　　　　　　a[href$=doc]{
　　　　　　background: green;;
　　　　　　color:#fff;
　　　　　　}
　　　　　　a[title*=box]{
　　　　　　background: blue;
　　　　　　color: #fff;
　　　　　　}
　　　　</style>

　　　　2.结构性伪类选择器—root()

　　　　　　“:root”选择器等同于<html>元素，简单点说：

　　　　　　:root{background:orange}

　　　　　　html {background:orange;}

　　　　　　得到的效果等同。

　　　　　　建议使用:root方法。

　　　　3.结构性伪类选择器—not

　　　　　　给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

　　　　　　form {
width: 200px;
margin: 20px auto;
}

　　　　　　div {
margin-bottom: 20px;
}

　　　　　　input:not([type="submit"]){
border:1px solid red;
}

css3干货的更多相关文章

  1. CSS3总结（干货）

    1.css3中好用的选择器 :target //突出显示活动的HTML锚 ::after / ::before{content:" ";} //content必须有,若无内容,用空 ...

  2. 绝对干货！！css3字体图标—丰富的阿里图标库iconfont的使用详解

    在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大 ...

  3. HTML5+CSS3新增内容总结！！！！！绝对干货

    说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些?答:属性选择器.伪类选择器.伪元素选择器.CSS3新特性有哪些?答:1.颜色:新增RGBA,HSLA模式 文字阴 ...

  4. 关于CSS和CSS3的布局小知识（干货）

    最近在网站偶然看到的这个网站,进去看了下讲的CSS布局,感觉还不错,讲易懂且实用推荐给大家. http://zh.learnlayout.com/

  5. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  6. 【超级干货】手机移动端WEB资源整合

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  7. 十天精通CSS3学习笔记 part2

    第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS ...

  8. Web 前端开发精华文章推荐（HTML5、CSS3、jQuery）【系列二十三】

    <Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  9. css3中变形与动画（二）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

随机推荐

  1. Arcgis-ModelBuilder和Python学习

    老师的一个项目,需求如下: 1)arcgis版本使用9.2: 2)需要发布一个数据入库服务,第三方调用这个服务,就可以将“水窖”点位数据存入到服务器数据库中的“水窖”图层: 3)入库前需要检查“水窖” ...

  2. [SQL]开启事物，当两条插入语句有出现错误的时候，没有错误的就插入到表中，错误的语句不影响到正确的插入语句

    begin transaction mustt insert into student values(,'kkk','j大洒扫','j','djhdjh') insert into student v ...

  3. Java String 的实例(02)

    1.初始化数组以及数组的拷贝 int[] a={1,2,3,4};        //System.out.println(Arrays.toString(a));        a=new int[ ...

  4. SparkSQL使用之Thrift JDBC server

    Thrift JDBC Server描述 Thrift JDBC Server使用的是HIVE0.12的HiveServer2实现.能够使用Spark或者hive0.12版本的beeline脚本与JD ...

  5. OpenStack-Mitaka 一键安装测试环境脚本

    说明:这个脚本是采用Bash Shell编写,这个版本还只能作为测试环境搭建使用. 此脚本原形的发起人是网友:WuYuLiang.这里有他的博客链接:   第一版的链接: http://blog.cs ...

  6. 8051学习笔记——AD

    AD.C #include<reg52.h> #include <iic.h> #define PCF8591 0x90 //PCF8591 地址 sbit LS138A=P2 ...

  7. 洛谷P2731 骑马修栅栏 Riding the Fences

    P2731 骑马修栅栏 Riding the Fences• o 119通过o 468提交• 题目提供者该用户不存在• 标签USACO• 难度普及+/提高 提交 讨论 题解 最新讨论 • 数据有问题题 ...

  8. CSS长度单位

    罗列了CSS中常用的长度单位及比较 单位 含义 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 rem 相对于根元素字体大小 px 相对于屏幕分辨率而不是视窗大小: ...

  9. [Nginx 2] form表单提交，图片上传

    导读:昨晚恶补了一些Nginx服务器的东西,从整体上对Nginx有一个初步的了解.上午去找师哥问了问目前项目中的使用情况,然后就开始上传图片了.这里就简单总结整理一下今天的成果,以后接着提升.简单粗暴 ...

  10. myeclipse的一些设置

    常用快捷键 Ctrl + Shift + R 搜索文件Ctrl + Shift + T 搜索类型Ctrl + O 搜索成员   智能提示 Windows > Preferences > G ...