简答题简述CSS3有哪些新特性，html5或者css3的新特性

css3新特性有哪些

CSS3 新特性

包括

CSS3 选择器（Selector）

@Font-face 特性、

Word-wrap Text-overflow 样式

Text-decoration

多列布局（multi-column layout）

边框和颜色，颜色支持透明度（color, border）

渐变效果（Gradient）

阴影（Shadow）和反射（Reflect）效果

盒子模型

Transitions, Transforms 和 Animation

比如：@Font-face 特性

@font-face {

font-family: BorderWeb;

src:url(BORDERW0.eot);

}

@font-face {

font-family: Runic;

src:url(RUNICMT0.eot);

}

.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }

.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

更多参考：

html5CSS3有哪些新特性，移除了那些元素

HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。

内容元素，article、footer、header、nav、section。

表单控件，calendar、date、time、email、url、search。

控件元素，webworker, websockt, Geolocation。

移出的元素有下列这些：

显现层元素：basefont，big，center，font, s，strike，tt，u。

性能较差元素：frame，frameset，noframes。

如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？

处理兼容问题有两种方式：

1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。

HTML5都有哪些新特性呢？

HTML5新特性如下：

1、脱机缓存。您可以在关闭浏览器并再次打开时还原数据，以减少网络流量。

2、音频和视频可以自由嵌入，多媒体形式更加灵活。

3、地理位置。地理位置定位使得定位导航不再是专属导航软件，地图也不需要下载很大的地图包。它可以通过缓存、去哪里、去哪里以及更灵活的方式来解决。

4、画布绘制提高了移动平台的绘制能力。canvas API可以用来绘制一个简单的热点地图来收集用户体验数据，并支持对图像的移动、旋转、缩放等常规编辑。

5、丰富的互动方式。提高交互能力：拖动、撤消历史操作、文本选择等。

6、与原生app相比，开发维护成本低。降低开发和维护成本；？使页面更小，减少用户不必要的开销；性能更好，功耗更低。

7、CSS3视觉设计师的辅助利器支持。CSS3支持字体嵌入、布局和最令人印象深刻的动画功能。

8、HTML5调用相机、相册和通讯录的功能。

扩展资料：

2014年10月29日，万维网联盟宣布，HTML第五次重大修订，经过近8年的努力，标准规范终于完成。HTML5旨在支持移动设备上的多媒体。引入了新的语法特性来支持这一点，如视频、音频和画布标记。HTML5还引入了一些新功能，这些功能可以真正改变用户与文档交互的方式，包括增强灵活性的新解析规则、新属性、过时或冗余属性等。

H5和css3的新特性

    例如     input type="month" 可以选择年月日

例如  input type="text" placeholder="请输入" 

显示在input输入框 默认显示的文字 

例如 鼠标滑动事件

实例

canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"/canvas

    video src=""/video

    audio src=""/audio

用法一样 例如

        // 设置本地存储

        localStorage.setItem("lastname", "Smith");

        // 获取本地存储

        document.getElementById("result").innerHTML = localStorage.getItem("lastname");

draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值

在h5中，如果想拖拽元素，就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽

div draggable="true"123/div

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

:nth-child(even) /* 按照偶数 */

:nth-child(odd)  /* 按照奇数 */

:disabled /* 选择每个禁用的E元素 */

:checked /* 选择每个被选中的E元素 */

:not(selector) /* 选择非 selector 元素的每个元素 */

::selection /* 选择被用户选取的元素部分 */

伪类元素选择器

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）

background-origin：规定背景图片的定位区域

对于 background-origin 属性，有如下属性

背景图片可以放置于 content-box、padding-box 或 border-box 区域

border-radius：圆角

box-shadow / text-shadow：阴影

border-image：边框图片

2D/3D 转换

2D 转换（transform）

translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px);

rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);

scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);

skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);

matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);

3D 转换

rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);

rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);

perspective：规定 3D 元素的透视效果

transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。

transition-duration：过渡动画的一个持续时间。

transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

transition-delay：延迟多久后开始动画

先定义 @keyframes 规则（0%，100% | from，to）

然后定义 animation，以下参数可直接写在 animation 后面

animation-name: 定义动画名称

animation-duration: 指定元素播放动画所持续的时间长

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式

animation-delay: 指定元素动画开始时间

animation-iteration-count: infinite | number：指定元素播放动画的循环次数

animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）

animation-play-state: running | paused ：控制元素动画的播放状态

实例

   div{

            width: 200px;

            height: 100px;

            background: pink;

            animation: move 1s linear ;

        }

        @keyframes move {

            0%{

                width: 0;

            }

            100%{

                width: 500px;

            }

        }

通过CSS3，能够创建多个列来对文本进行布局

column-count: 规定元素应该被分隔的列数

column-gap: 规定列之间的间隔

column-rule: 设置列之间的宽度、样式和颜色规则

resize

box-sizing

outline-offset

resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll

div { 

 resize: both;/* none|both|horizontal|vertical; */ overflow: auto;

}

box-sizing 属性可设置的值有 content-box、border-box 和 inherit

content-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width

border-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成

inherit：规定应从父元素继承 box-sizing 属性的值

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

div {

        display: flex;

        flex-direction: row;

        /*弹性盒方向：主轴方向X轴  */

        flex-direction: column;

        /* 弹性盒方向：主轴Y轴方向 */

        flex-direction: row-reverse;

        /* 弹性盒方向：主轴方向X轴 倒叙 */

        flex-direction: column-reverse;

        /* 弹性盒方向：主轴Y轴方向 倒叙*/

        flex-wrap: nowrap;

        /* 弹性盒换行：不换行 默认的 */

        flex-wrap: wrap;

        /* 弹性盒换行：换行 */

        /*设置主轴方向子元素排列顺序*/

        justify-content: flex-start;

        /* 从左到右排列 默认的 */

        justify-content: flex-end;

        /* 从尾部开始排列 不影响子元素排列顺序 */

        justify-content: center;

        /* 从主轴居中对齐 */

        justify-content: space-around;

        /* 平分主轴剩余空间 */

        justify-content: space-between;

        /* 两边对齐，中间评分剩余空间 */

        justify-content: space-evenly;

        /* 间距相同 */

    }

CSS 兼容内核

-moz-：代表FireFox浏览器私有属性

-ms-：代表IE浏览器私有属性

-webkit-：代表safari、chrome浏览器私有属性

-o-：代表opera浏览器私有属性

CSS3都有哪些新特性呢？

第 1 选择器

第 2 RGBA和透明度

第 3 多栏布局

第 4 多背景图

第 5 Word Wrap

第 6 文字阴影

第 7 @font-face属性

第 8 圆角(边框半径)

第 9 边框图片

第 10 盒阴影

第 11 盒子大小

第 12 媒体查询

第 13 语音

扩展资料:

工作原理

CSS3原理同CSS，是在网页中自定义样式表的选择符，然后在网页中大量引用这些选择符[29]。

新增特性中transform的原理较为特殊，虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形，但是变形中的矩阵函数都可以使用matrix()函数来代替。

新增特性

CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

参考资料:百度百科-css3

关于简答题简述CSS3有哪些新特性和html5或者css3的新特性的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。