css复习整理(五):CSS3新特性
来源:互联网 发布:访客网络设置多少 编辑:程序博客网 时间:2024/05/16 20:30
一. 边框与背景
1. 边框
border-radius:倒角属性,可为边框添加倒角;border-image可以使用图片来创建边框,如url(/i/border.png) 30 30 round;
box-shadow可用来向框添加阴影,其语法为box-shadow: h-shadow v-shadow blur spread color inset。
2. 背景
background-size可以用来设置背景图片的尺寸;background-origin/clip可用来设置背景图片所在区域,可以是content-box,padding-box或者border-box;CSS3可设置多重背景图片,如background-image:url(bg_flower.gif),url(bg_flower_2.gif)。
二. 文本与字体
1. 文本
text-shadow给文本添加阴影效果,如text-shadow: 5px 5px 5px #FF0000;word-wrap:break-word可实现强制自动换行,这可能会导致单词被拆分,text-overflow是当文本溢出包含元素时的属性设置,语法为text-overflow: clip| ellipsis| string;换行规则可用如下属性设置word-break: normal| break-all| keep-all。
2. 字体
@font-face :通过这一属性,可以使用自己想用的字体,及时这一字体在用户电脑中不存在。您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件,可通过 font-family 属性来引用字体的名称 (myFirstFont),举例如下:
<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>
三. 2D转换与3D转换
1. 2D转换
2. 3D转换
对于以上表格中的属性,增加 z方向的设置。还有transform-style,规定被嵌套元素如何在 3D 空间中显示;perspective规定 3D 元素的透视效果;backface-visibility定义元素在不面对屏幕时是否可见。
四.过渡与动画
1.过渡
不使用flash或javascript的情况下,使元素从一种样式变为另一种效果。有以下属性transition-property(要改变的属性名),transition-duration(改变所经历的时间),transition-timing-function(速度曲线),transition-delay(效果何时开始),都可以写在transition中,如下transition: property duration timing-function delay。
2.动画
使用@keyframes 规则来创建动画,在创建动画时,需要将其捆绑到选择器,否则不会产生动画,须规定动画的名称和时长。举例如下:
div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{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;}}@-moz-keyframes myfirst /* Firefox */{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;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{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;}}@-o-keyframes myfirst /* Opera */{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;}}
动画可设置多个属性,举例如下:animation: myfirst 5s linear 2s infinite alternate,依次规定了动画名称,动画时长,速度曲线,延迟时间,循环次数(infinite是无限循环)以及下一周期是否逆向播放。
五.多列布局与界面
1.多列布局如同报纸的布局方式为多列布局,其对应属性如下:column-count(列数),column-width(列宽),column-fill(填充列的方式);column-gap(列之间的间隔), column-rule(列间分割线样式用来设置宽度,颜色,样式等) column-span(横跨列数)。
2.用户界面新特性
新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。resize 属性规定是否可由用户调整元素尺寸,如设置div,可由用户调整矩形的宽和高,举例如下:resize:both; overflow:auto。outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
- css复习整理(五):CSS3新特性
- CSS3新特性整理--圆角+阴影
- 新特性AAtitti css3 新特性attilax总结titti css
- 11.07 CSS布局及CSS3的新特性
- CSS3新特性
- CSS3的新特性
- CSS3新特性一览
- CSS3新特性
- CSS3新特性简介
- CSS3新特性
- css3+html5新特性
- CSS3 新特性小结
- CSS3新的特性
- CSS3の新特性
- CSS3新特性学习
- css3新特性
- CSS3 新特性实例
- css3新特性
- 我常用的大数据执行脚本,共享给大家
- 互联网地址
- 2017最新过狗菜刀原理以及自己修改菜刀过狗
- ENVI批量图片格式转换(IDL语言实现,raw转换为tif)
- JS弹出框效果BOOTBOX.JS
- css复习整理(五):CSS3新特性
- Is Derek lying?
- HDU 1846 Brave Game
- 安信可A7模块GPS-编程获取GPS定位信息
- NM_LISTVIEW结构
- 如何重写hashCode()和equals()方法
- App之间的通信方式
- PHP多维数组按指定键名排序
- 大数据挑战赛历程与总结随笔