1.圆角矩形

.border_radius_test{
border-radius:25px;
-moz-border-radius:25px;
}

数值越大越圆

2.容器阴影

.box_shadow_test{
box-shadow:1px 1px 20px #888888;
-moz-box-shadow: 1px 1px 20px #888888;
}

前两个数值是阴影距离容器的偏移量,第三个数值是阴影的模糊程度,最后一个颜色数值是阴影的颜色

3.背景图片

.bg_test{
background-size:50px 50px;
-moz-background-size:50px 50px;
background-origin:content-box;
}

size属性可以调整背景图片大小,缩放图片蛮好用的,origin属性可以自动摆放背景图片位置,有content-box|padding-box|border-box三种选项,就是盒子模型的那三层。

4.文字

.text_test{
text-shadow:2px 2px 7px #000000;
word-wrap:break-word;
}

shadow属性的参数设定和容器阴影一样,word-wrap是用来把超出容器范围的文字强制换行。

5.移动/翻转/旋转(2D/3D)

无论是2D还是3D都要用到transform这个属性,而且是-ms-/-moz-/-webkit-/-o-都要有,分别对应IE/老版本的FireFox/Safari&Chrome/Opera...Orz!

水平移动 translate(x,y) 横向移动x,纵向移动y

.translate_test{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}

旋转 rotate(n) 顺时针旋转n个deg单位

.rotate_test{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}

 

放大/缩小 scale(x,y) 横向放大/缩小x倍,纵向放大/缩小y倍

.scale_test{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-moz-transform:scale(2,4); /* Firefox */
-webkit-transform:scale(2,4); /* Safari and Chrome */
-o-transform:scale(2,4); /* Opera */
}

翻转 skew(x,y) 绕x轴翻转x个deg单位,绕y轴翻转y个deg单位。

.skew_test{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}

5.过渡

.transition_test{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
} .transition_test:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}

5.动画

.animation_test{
width:100px;
height:100px;
background:red;
position:relative;
animation:myAnimation 5s;
-moz-animation:myAnimation 5s; /* Firefox */
-webkit-animation:myAnimation 5s; /* Safari and Chrome */
-o-animation:myAnimation 5s; /* Opera */
} @keyframes myAnimation{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} /* Firefox */
@-moz-keyframes myAnimation {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} /* Safari and Chrome */
@-webkit-keyframes myAnimation {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} /* Opera */
@-o-keyframes myAnimation {
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

CSS3的新属性的更多相关文章

  1. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  2. 小K的H5之旅-HTML5与CSS3部分新属性浅见

    一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br ...

  3. CSS3的新属性的一下总结

    阮一峰:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 由于自己经常搞混:animation,tran ...

  4. css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size

    css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%- ...

  5. css3 的新属性

    1,动画,animate------>//动画-名称-动画的时间间隔-以什么方式播放-循环 .right{ animate:dropdown 4px 5px #000; // x的偏移值 y的偏 ...

  6. 使用css3新属性clip-path制作小图标

    一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

  7. css3新属性@ text-shadow

    text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

  8. CSS3新属性注释及实例

    这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...

  9. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

随机推荐

  1. 这些天php面试的总结

    面试总结 记录一些本人在面试中遇到的觉得有些掌握不好的面试题,下面的答案都是本人回答的,如果哪里不对的话,希望各位能够指出. 1.Git fetch和git pull的区别 Git fetch相当于从 ...

  2. 【vue】index.html main.js app.vue index.js怎么结合的? 怎么打包的?搜集的信息

    转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...

  3. CSS中可以和不可以继承的属性【转】

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shad ...

  4. 第104天:web字体图标使用方法

    字体图标经常使用的是 阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 一.阿里库字体图标使用 第一步: 首先进入阿里巴巴矢 ...

  5. css 在背景图上加渐变

    <html> <head> <title>我的第一个 HTML 页面</title> <style> .banner { width: %; ...

  6. HDU4681_String

    这个题目是这样的. 给你三个字符串A,B,C,(C一定是A和B的一个公共子序列). 现在要求你构造出一个串D,使得D同时为A和B的子序列,且C是D的一个连续子串.求D的最大可能长度. 很简单的一个DP ...

  7. 深入理解JVM一JVM内存模型

    前言 JVM一直是java知识里面进阶阶段的重要部分,如果希望在java领域研究的更深入,则JVM则是如论如何也避开不了的话题,本系列试图通过简洁易读的方式,讲解JVM必要的知识点. 一.运行流程 我 ...

  8. DjangoORM基本增删改查

    1. 下载并且安装navicat premium,连接到db.sqlite3数据库. 2.先在urls.py中增加一条对应关系,专门用来做测试. 3.此时models.py中的代码如下: 4. 对于O ...

  9. 【刷题】BZOJ 1468 Tree

    Description 给你一棵TREE,以及这棵树上边的距离.问有多少对点它们两者间的距离小于等于K Input N(n<=40000) 接下来n-1行边描述管道,按照题目中写的输入 接下来是 ...

  10. 【BZOJ1065】【NOI2008】奥运物流(动态规划)

    [BZOJ1065][NOI2008]奥运物流(动态规划) 题面 BZOJ 洛谷 题解 先不考虑环的情况,于是变成了一棵树. 这样子我们答案的贡献是\(\sum_{i=1}^nC_i\times k^ ...