CSS3新特性

一.CSS3 Rounded Corners

通过使用CSS3 border-radius属性， 可以得到圆角的效果。

#rcorners {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px; 
    width: 200px;
    height: 150px; 
}
image.png

显示效果如下，此时四个方向的圆角都会被设置。
如果想单独设置4个方位的圆角：

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

二.CSS3 Border Images

通过使用CSS3 border-image 属性，可以将一幅图片设置成为一个元素的边框。
看下面一段代码：

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 100px;
        }

其中 boredr.png 是下面这幅图，大小为81*81：

border.png

显示效果如下：

image.png

注意：为了使 border-image 正常生效，需要设置元素的 border 属性。
border-image 属性是以下几个属性的简写：

  • border-image-source：指定图片的位置。
  • border-image-slice：指定图片的裁剪方式。
  • border-image-width：指定图片的显示宽度。
  • border-image-outset：指定图片相对于边框的偏移位置。
  • border-image-repeat：指定四条边框的图片是拉伸还是重复。
    其中 border-image-slice 可以参考下面这篇文章：
    http://blog.sina.com.cn/s/blog_5f2389f90102vks0.html

三.CSS3 Backgrounds

  • CSS3允许多个背景图片，有以下两种写法：
  1. 一次性设置所有的背景图片和属性
#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
  1. 单独设置每个背景图片的属性
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}
  • CSS3 Background Size
    在 background-size 出现之前，背景图片的大小是无法修改的。它是图片的实际大小。
    CSS3 background-size 属性允许你设置背景图片的大小。
#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px;
    background-repeat: no-repeat;
}

background-size 有两个可选的值 contain 和 cover

contain：背景图片的大小尽可能的放大，但是不会超过容器的大小，所以容器有一部分可能没有被背景图片覆盖。

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 50px;
            background: url("border.png") no-repeat;
            background-size: contain;
        }
image.png

cover ：背景图片的大小尽可能的放大，放大到将容器完全覆盖为止。

#myDIV {
            border: 10px solid transparent;
            padding: 15px;
            border-image: url("border.png") 30 round;
            width: 100px;
            height: 50px;
            background: url("border.png") no-repeat;
            background-size: cover;
        }
image.png

background-size 也可以同时指定多个背景图片的大小：

#example1 {
    background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}
  • Full Size Background Image
    如果我们想要实现一个网页上固定的背景图片，那该怎么办呢？
html {
    background: url(img_flower.jpg) no-repeat center fixed; 
    background-size: cover;
}

注意其中的 fixed，这个属性是 background-attachment 属性的一个取值。

  • CSS3 background-origin Property
    background-origin 属性指定背景图片的位置，它又下面三种取值：
  1. border-box：背景图片从左上角的边框开始。
image.png
  1. padding-box（默认）：背景图片从padding的左上角开始。
image.png
  1. content-box：背景图片从内容的左上角开始。
image.png
  • CSS3 background-clip Property
    background-clip 属性指定了背景图片的填充区域，有以下三种取值：
  1. border-box（默认）：背景填充至边框。
  2. padding-box：背景填充至padding。
  3. content-box：背景填充至content。

四.CSS3 Gradients

  • CSS3 Linear Gradients
    语法：
background: linear-gradient(direction, color-stop1, color-stop2, ...);

Linear Gradient - Top to Bottom (this is default)

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(red, yellow); /* Standard syntax */
        }

image.png

Linear Gradient - Left to Right

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to right, red , yellow); /* Standard syntax */
        }

image.png

Linear Gradient - Diagonal（对角线）

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
        }
image.png

为了更加灵活的控制渐变方向，我们还可以自定义渐变角度。
语法：
background: linear-gradient(angle, color-stop1, color-stop2);

#myDIV {
            width: 250px;
            height: 200px;
            background: -webkit-linear-gradient(0deg, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(0deg, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(0deg, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */
        }
image.png
#myDIV {
            width: 250px;
            height: 200px;
            background: -webkit-linear-gradient(90deg, red, yellow); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(90deg, red, yellow); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(90deg, red, yellow); /* For Firefox 3.6 to 15 */
            background: linear-gradient(90deg, red, yellow); /* Standard syntax (must be last) */
        }
image.png

不难发现角度的规律。

image.png

Using Transparency（透明度）
需要使用透明度的话，需要使用rgba()函数来定义颜色，该函数的最后一个参数用来指定颜色透明度。

#myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
            background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
            background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
            background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
        }

image.png

Repeating a linear-gradient

 #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            /* Safari 5.1 to 6.0 */
            background: -webkit-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Opera 11.1 to 12.0 */
            background: -o-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Firefox 3.6 to 15 */
            background: -moz-repeating-linear-gradient(red, yellow 20%, green 30%);
            /* Standard syntax */
            background: repeating-linear-gradient(red, yellow 20%, green 30%);
        }

image.png

其中颜色属性中的百分比指的是颜色停止位置占容器长度的百分比值。

  • CSS3 Radial（径向） Gradients
    语法：
background: radial-gradient(shape size at position, start-color, ..., last-color);

Radial Gradient - Evenly Spaced（间隔均匀） Color Stops (this is default)

        #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 to 6.0 */
            background: -o-radial-gradient(red, yellow, green); /* For Opera 11.6 to 12.0 */
            background: -moz-radial-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
            background: radial-gradient(red, yellow, green); /* Standard syntax */
        }

image.png

Radial Gradient - Differently Spaced Color Stops（自定义间隔）

 #myDIV {
            width: 250px;
            height: 200px;
            background: red; /* For browsers that do not support gradients */
            background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%); /* Safari 5.1-6.0 */
            background: -o-radial-gradient(red 5%, yellow 15%, green 60%); /* For Opera 11.6-12.0 */
            background: -moz-radial-gradient(red 5%, yellow 15%, green 60%); /* For Firefox 3.6-15 */
            background: radial-gradient(red 5%, yellow 15%, green 60%); /* Standard syntax */
        }
image.png

Set Shape（定义渐变中心形状）
1.circle
2.ellipse（默认）

Repeating a radial-gradient

#grad {
  background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Opera 11.6 to 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* For Firefox 3.6 to 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
  /* Standard syntax */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

五.CSS3 Shadow Effects

  • CSS3 Text Shadow
h2 {
           text-shadow: 2px 20px;
        }
image.png

可以看出第一个长度参数控制的是阴影的水平位置，第二个参数控制的是阴影的垂直位置。

h2 {
            color: white;
            text-shadow: 2px 2px 4px #000000;
        }
image.png

第三个参数控制的是阴影的特效，第四个参数可以自定义阴影颜色。

多个阴影

 h2 {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
        }
image.png
h2 {
            color: yellow;
            text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        }
image.png
  • CSS3 box-shadow Property
    语法：box-shadow: h-shadow v-shadow blur spread color inset
值 描述
h-shadow 必需，阴影的水平位置
v-shadow 必需，阴影的垂直位置
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选，阴影的颜色。
inset 可选，将外部阴影 (outset) 改为内部阴影。

用box-shadow实现一个常用的卡片效果

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 40px;
}

div.container {
    padding: 10px;
}

效果如下：

image.png

六.CSS3 Text

  • text-overflow
    这个属性控制当你的文字超出容器时该如何显示。
  1. text-overflow: clip;
  1. text-overflow: ellipsis;
image.png
  • word-wrap
    word-wrap：break-word属性使得一个很长的文字自动换行。
  • word-break
    word-break属性指定了换行的规则。
  1. keep-all：只在连字符处换行
  2. break-all：默认换行。

七.CSS3 Web Fonts

Web字体允许Web设计人员使用未安装在用户计算机上的字体。

@font-face {
   font-family: myFirstFont;             //自定义字体名字
   src: url(sansation_light.woff);      //字体文件路径
}

div {
   font-family: myFirstFont;
}

八.CSS3 2D Transforms

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

1. The translate() Method

translate()方法可以使得元素相对于当前的位置水平和垂直移动。

div {
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari */
    transform: translate(50px, 100px);
}

移动之后的元素还是占据其之前在文档中的位置。

2.The rotate() Method

rotate()方法可以使得元素旋转一定角度。

div {
    -ms-transform: rotate(-20deg); /* IE 9 */
    -webkit-transform: rotate(-20deg); /* Safari */
    transform: rotate(-20deg);
}
image.png

3.The scale() Method

scale()方法可以使得元素在宽度和高度方向伸长或者缩小。

div {
    -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);
}

4.The skewX() Method

skewX()方法根据给定的角度使得元素在X轴方向倾斜。

div {
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg);
}
image.png

5.The skewY() Method

skewY()方法根据给定的角度使得元素在Y轴方向倾斜。

6.The skew() Method

前两个方法的结合

7.The matrix() Method

matrix()是将之前的六个方法结合在一起：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

九.CSS3 3D Transforms

十.CSS3 Transitions

CSS3 transitions 可以使的属性的变换更加平滑。

div {
    transition-property: width;     //指定要应用的属性
    transition-duration: 2s;        //指定时间间隔
    transition-timing-function: linear;    //指定过度类型
    transition-delay: 1s;     //指定延迟时间
}

transition-timing-function取值如下：

  • ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
  • linear - specifies a transition effect with the same speed from start to end
  • ease-in - specifies a transition effect with a slow start
  • ease-out - specifies a transition effect with a slow end
  • ease-in-out - specifies a transition effect with a slow start and end

十一.CSS3 Animations

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,830评论 5赞 468
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,992评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,875评论 0赞 331
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,837评论 1赞 271
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,734评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,091评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,550评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,217评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,368评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,027评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,623评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2赞 341

推荐阅读更多精彩内容

  • CSS3 新特性学习
    CSS3 是最新的 CSS 标准，并且完全向后兼容，不过目前W3C 仍然在对 CSS3 规范进行开发，虽然标准的规...
    颭夏阅读 3,875评论 4赞 42
  • HTML5和CSS3新特性一览
    HTML5 1.HTML5新元素 HTML5提供了新的元素来创建更好的页面结构： 标签描述 定义页面独立的内容区域...
    L怪丫头阅读 2,798评论 0赞 4
  • css３新特性和新功能
    总览 边框border-color 属性boder-image 属性border-radius 属性box-sha...
    DecadeHeart阅读 1,002评论 0赞 9
  • 关于CSS3 新特性
    一、CSS3 边框 在 css3 中新增的边框属性如下： 创建圆角边框 示例 在CSS2中添加圆角很棘手，我们不得...
    于晓鱼阅读 3,761评论 0赞 3
  • CSS3 新特性
    几行简单的 CSS 代码便可实现一系列令人眼前一亮的效果，比用 JavaScript 去模拟这样的效果要好得多，不...
    简不简单_都好阅读 417评论 0赞 1