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. js中表单提交后按钮变灰色的功能

    表单提交后按钮变成灰色 http://www.111cn.net/wy/js-ajax/45299.htm

  2. IGeoDatabaseBridge2.GetLineOfSight

    IGeoDatabaseBridge2.GetLineOfSight Method Returns a line-of-site indicator interpolated from the TIN ...

  3. java中的==和!=

    java中一般很少用到==和!=,除了用于和null比较,如: if(null==o){ } //或者 if(null!=o){ } 其他地方比较一律用equals(); 建议:写完代码后在整个项目中 ...

  4. 30. Distinct Subsequences

    Distinct Subsequences OJ: https://oj.leetcode.com/problems/distinct-subsequences/ Given a string S a ...

  5. 菜鸟-手把手教你把Acegi应用到实际项目中(4)

    今天就讲个ConcurrentSessionFilter. 在Acegi 1.x版本中,控制并发HttpSession和Remember-Me认证服务不能够同时启用,它们之间存在冲突问题,这是该版本的 ...

  6. Linux下串口ttyS2,ttyS3不能用的问题解决办法

    PC104,Xlinux下,突然发现串口3,4不能用... 以为是硬件的问题,换成wince后,3,4工作正常,排除电路问题 在linux下查看dmesg: serial8250: ttyS0 at ...

  7. No.010 Regular Expression Matching

    10. Regular Expression Matching Total Accepted: 89193 Total Submissions: 395441 Difficulty: Hard Imp ...

  8. android 上传文件用php程序在服务端接受（一）

    php服务端接受程序..file_up.php. <?php /* require_once('lib/session_config.php'); require_once('lib/flydc ...

  9. Nodejs笔记（二）

    Nodejs事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一 ...

  10. Android添加权限大讲解

    对于新手来说,最烦恼的不是如何从网上下载到安卓项目,而是下载到的安卓项目不知道如何添加权限和要添加哪些权限. 现在就针对安卓的权限来讲解这些权限应该具体用在什么地方 首先在项目下找到 AndroidM ...