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. BestCoder Round #79 (div.2)

    1001.没推到题解那么细,枚举一下也可以.用通分可以避免小数精度问题. #include<iostream> #include<stdio.h> using namespac ...

  2. POJ 1611

    菜鸟第一次做这种.想了好一会儿.== 首先还是初始化记忆数组,使得每一个元素的初始根节点是自己. 然后是对输入的数据进行并集.我们拿出每组元素的第一个作为根节点. 每次检测是否已经存在根节点.如果存在 ...

  3. NYOJ 52-无聊的小明

    点击打开链接 无聊的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述       这天小明十分无聊,没有事做,但不甘于无聊的小明聪明的想到一个解决无聊的办法,因为他突 ...

  4. JavaWeb四个域

    一.ServletContext对象(Context域)1.服务器启动的时候,会为每一个webapp创建一个对应的ServletContext对象,他代表该webapp,当服务器停止或将webapp从 ...

  5. java网格布局管理器

    public class GirdLayoutPosition extends JFrame{    public GirdLayoutPosition()    {        Container ...

  6. (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在

    问题描述:在用vs生成MVC时若使用Internet应用程序为模版,项目建好后重新编译下无法通过,弹出错误: 解决方案:问题出来后,询问了身边很多人都是一头雾水,于是乎各种谷歌和百度,还好功夫不负有心 ...

  7. QQ音乐API

    今天分享的是QQ音乐API 搜索歌曲API:http://s.music.qq.com/fcgi-bin/music_search_new_platform?t=0& amp;n={2}&am ...

  8. java servlet上传文件并把文件内容显示在网页中

    servlet3.0(JDK1.6)自带的API即可实现本地文件的上传,Servlet3.0新增了Part接口,HttpServletRequest的getPart()方法取得Part实现对象.下面我 ...

  9. Vmware ESX5i 环境下部署Windows Storage Server 2008 R2

    ESX5i 环境下部署Windows Storage Server 2008 R2       Windows Storage Server 2008 这款产品微软早已发布,WSS2008是基于Win ...

  10. 【HTML/XML 10】XML文档中的Schema文件

    导读:DTD是对XML文档进行有效性验证的方法之一,事实上,继DTD之后,出现了用来规范和描述XML文档的第二代标准:Schema.Schema是DTD的继承,但是也有其不同的地方,它是真正的以独立的 ...