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. [Java] 字符流 Writer，输出字符数据PrintWriter

    package test.stream; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...

  2. javascript 传递引用类型参数

    JavaScript代码如下: function setName(obj){ obj.name = "test1"; obj = new Object(); obj.name = ...

  3. nyoj 85 有趣的数

    点击打开链接 有趣的数 时间限制:3000 ms  |  内存限制:65535 KB 难度: 描述 把分数按下面的办法排成一个数表. 1/1 1/2 1/3 1/4..... 2/1 2/2 2/3. ...

  4. nyoj 76 超级台阶

    点击打开链接 超级台阶 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 有一楼梯共m级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第m级,共有多少走法? 注:规 ...

  5. ansible管理

    查看版本: ansible –version 升级pip安装的ansible: sudo pip install -U ansible

  6. (转)windows下配置nginx+php环境

    原文地址 http://www.cnblogs.com/huayangmeng/archive/2011/06/15/2081337.html 刚看到nginx这个词,我很好奇它的读法(engine ...

  7. 【转】java内部类的作用

    http://andy136566.iteye.com/blog/1061951/ 推荐一. 定义 放在一个类的内部的类我们就叫内部类. 二. 作用 1.内部类可以很好的实现隐藏 一般的非内部类,是不 ...

  8. MFC学习 多线程

    #include <Windows.h> #include <process.h> #include <stdio.h> HANDLE hMutex; //互斥对象 ...

  9. [ CodeVS冲杯之路 ] P3955

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/3955/ 最长上升子序列的加强版,n 有1000000,n 方的 DP 肯定会 TLE,那么用二分栈维护 二分栈我讲不好 ...

  10. Proxy模式

    本文完整翻译自http://giorgiosironi.blogspot.com/2010/02/practical-php-patterns-proxy.html 因为搜到网上很多这个文章,最后的代 ...