列举5个css3新增的属性，HTML5新增的元素有哪些
大家好，今天来为大家解答列举5个css3新增的属性这个问题的一些问题点，包括HTML5新增的元素有哪些也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
CSS3新增的哪些选择器和常见的属性是哪些
一、新增的选择器
CSS3新增的属性选择器{除ie6外的大部分浏览器支持）
1 E[att^="val"]属性att的值以"val"开头的元素 div[id^="nav"]{ background:#ff0;}
2 E[att$="val"]属性att的值以"val"结尾的元素
3 E[att*="val"]属性att的值包含"val"字符串的元素
结构伪类选择器（过滤选择器）
(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。
由于IE6/7/8不支持，没办法，选择合适的场合用吧。)
4 E:root匹配文档的根元素，对于HTML文档，就是HTML元素
5 E:nth-child(n)匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(3){ color:#f00;}
6 E:nth-last-child(n)匹配其父元素的倒数第n个子元素，第一个编号为1 p:last-child{ background:#ff0;}
7 E:nth-of-type(n)与:nth-child()作用类似，但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
8 E:nth-last-of-type(n)与:nth-last-child()作用类似，但是仅匹配使用同种标签的元素
9 E:last-child匹配父元素的最后一个子元素，等同于:nth-last-child(1)
10 E:first-of-type匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
11 E:last-of-type匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
12 E:only-child匹配父元素下仅有的一个子元素，等同于:first-child:last-child或:nth-child(1):nth-last-child(1) p:only-child{ background:#ff0;}
13 E:only-of-type匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
14 E:empty匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 p:empty{ background:#ff0;}
与用户界面(UI)有关的伪类(ie6 7 8不支持)
15 E:enabled匹配表单中激活的元素
16 E:disabled匹配表单中禁用的元素 input[type="text"]:disabled{ background:#ddd;}
17 E:checked匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
18 E::selection匹配用户当前选中的元素
级元素通用选择器
ie6不支持
19 E~ F匹配任何在E元素之后的同级F元素 p~ ul{ background:#ff0;}
反选伪类
(ie6 7 8 firefox3.0以下 Opera9.0不支持)
20 E:not(s)匹配不符合当前选择器的任何元素:not(p){ border:1px solid#ccc;}
:target伪类
(ie6 7 8不支持)
21 E:target匹配文档中特定"id"点击后的效果
二、css3新增属性
一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0#000;
-moz-box-shadow: 20px 10px 0#000;
-webkit-box-shadow: 20px 10px 0#000;
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid#000;
-moz-border-bottom-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-top-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-left-colors:#555#666#777#888#999#aaa#bbb#ccc;
-moz-border-right-colors:#555#666#777#888#999#aaa#bbb#ccc;
说明:
颜色值数量不固定,且FF的私有写法不支持缩写:-moz-border-colors:#333#444#555;
支持:
FF3+
三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20--->边框的宽度,分别对应top, right, bottom, left边框,改变宽度可以实现不同的效果;
(2).边框图片效果(目前仅实现了两种):
repeat---边框图片会平铺,类似于背景重复;
stretch---边框图片会以拉伸的方式来铺满整个边框;
(3).必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5,Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用:
text-shadow:[<颜色><水平偏移><纵向偏移><模糊半径>]||[<水平偏移><纵向偏移><模糊半径><颜色>];
说明:
(1)<颜色>和<模糊半径>是可选的,当<颜色>未指定时,将使用文本颜色;当<模糊半径>未指定时,半径值为0;
(2)shadow可以是逗号分隔的列表,如:
text-shadow: 2px 2px 2px#ccc, 3px 3px 3px#ddd;
(3)阴影效果会按照shadow list中指定的顺序应用到元素上;
(4)这些阴影效果有可能相互重叠,但不会叠加文本本身;
(5)阴影可能会跑到容器的边界之外,但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3
五.text-overflow(文本截断)
使用:
text-overflow: inherit| ellipsis| clip;
-o-text-overflow: inherit| ellipsis| clip;
说明:
(1)还有一个属性ellipsis-word,但各浏览器均不支持.
支持:
IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
word-wrap: normal| break-word;
支持:
IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+, Safari 4, Chrome 3
八. opacity(不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50);/* for IE6, 7*/
-ms-filter(opacity=50);/* for IE8*/
支持:
all
九. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box| border-box;// for opera
-moz-box-sizing:content-box| border-box;
-webkit-box-sizing:content-box| border-box;
说明:
1. content-box:
使用此值时,盒模型的组成模式是,元素宽度= content+ padding+ border;
2. border-box:
使用此值时,盒模型的组成模式是,元素宽度= content(即使设置了padding和border,元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3
十. resize(元素缩放)
使用:
resize: none| both| horizontal| vertical;
说明:
1.必须将元素的overflow属性设置为auto或hidden,该属性才能起作用(overflow设置为visible时,无效);
2.属性值说明:
(1). none-->禁用缩放;
(2). both-->可同时缩放宽度和高度;
(3). horizontal-->仅能缩放宽度;
(4). vertical-->仅能缩放高度;
支持:
safari 4, chrome 3
十一. outline(外边框)
使用:
outline:边框厚度边框样式边框颜色;
outline-offset:偏移值;
说明:
outline-offset需要独立写,简写是无效的.
支持:
FF3+, safari 4, chrome 3, opera 10
十二. background-size(指定背景图片的尺寸)
使用:
-o-background-size: [length| percentage]{1, 2};
-webkit-background-size:[length| percentage]{1, 2};
例如:
-o-background-size: 50px 60px;
-webkit-background-size:50px 60px;
这会将背景图片的宽设置了50px,高60px.
支持:
safari 4, chrome 3, opera 10
十三. background-origin(指定背景图片从哪里开始显示)
使用:
-webkit-background-origin: border| padding| content;
-moz-background-origin: border| padding| content;
说明:
(1) border-->从border区域开始显示背景;
(2) padding-->从padding区域开始显示背景;
(3) content-->从content区域开始显示背景;
注意:
1.必须先指定background属性,然后才能指定该属性,如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3, FF 3+
十四. background-clip(指定背景图片从什么位置开始裁切)
使用:
-webkit-background-origin: border-box| padding-box| content-box| no-clip;
说明:
(1)border-box-->从border区域向外裁剪背景;
(2)padding-box-->从padding区域向外裁剪背景;
(3)content-box-->从content区域向外裁剪背景;
(4) no-clip-->不裁切背景.
注意:
1.必须先指定background属性,然后才能指定该属性,如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3
十五. background(为一个元素指定多个背景)
使用:
background: [background-image]| [background-origin]| [background-clip]| [background-repeat]| [background-size]| [background-position]
例子:
background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;
支持:
safari 4, chrome 3
十六. hsl(通过色调,饱和度,亮度来指定颜色值)
使用:
hsl:(<length>||<percentage>||<percentage>);
说明:
(1) length: h(色调), 0(或360)表示红色, 120表示绿色, 240表示蓝色;
(2) percentage: s(饱和度),取值为0%到100%之间的值;
(3) percentage: l(亮度),取值为0%到100%之间的值;
例子:
background: hsl(240, 50%, 100%);
color: hsl(100, 80, 100%);
支持:
safari 4, chrome 3, FF3, opera 10
十七. hsla(在hsl的基础上上增加了一个透明度设置)
使用:
hsla:(<length>||<percentage>||<percentage>||<opacity>);
说明:
(1) opacity: a(透明度),取值在0到1之间;
例子:
background: hsl(240, 50%, 100%, 0.5);
color: hsl(240, 50%, 100%, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十八. rgba(基于r,g,b三个颜色通道来设置颜色值,通过a来设置透明度)
使用:
rgba:(r, g, b, opacity);
说明:
(1) r:红色,正整数|百分数;
(2) g:绿色,正整数|百分数;
(3) b:蓝色,正整数|百分数;
(4) a:透明度,取值在0到1之间;
(5)正整数在0到255之间,百分数在0%到100%之间.
例子:
rgba:(100%, 244, 0, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十九、transition（a标签hover渐隐效果）
a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s;}
-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
css3里面动画有没有用过动画的属性有哪些具体是什么
CSS3动画属性
下面的表格列出了@keyframes规则和所有动画属性：
@keyframes规定动画。
animation所有动画属性的简写属性，除了 animation-play-state属性。
animation-name规定@keyframes动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function规定动画的速度曲线。默认是"ease"。 3
animation-delay规定动画何时开始。默认是 0。 3
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是"normal"。
animation-play-state规定动画是否正在运行或暂停。默认是"running"。
animation-fill-mode规定对象动画时间之外的状态。
下面的两个例子设置了所有动画属性：
实例
运行名为 myfirst的动画，其中设置了所有动画属性：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox:*/
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari和 Chrome:*/
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera:*/
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
css3中有哪些渐变属性
CSS3中常用的渐变属性主要包括以下五种：
1. linear-gradient（线性渐变）
用于创建沿直线方向的颜色过渡效果。可通过参数指定渐变方向（如角度或关键词）、起始/结束颜色及中间色标位置。例如：
background: linear-gradient(to right, red, blue);
表示从左到右的红色到蓝色渐变。若省略方向，默认从上到下渐变。色标位置可用百分比或长度单位（如100px）精确控制。
2. radial-gradient（径向渐变）
以中心点向外辐射的颜色过渡效果。需指定形状（circle圆形或ellipse椭圆）、中心点位置及色标。例如：
background: radial-gradient(circle at center, red, blue);
表示从中心向四周的圆形渐变。若省略形状，默认根据容器比例自动调整为椭圆。
3. conic-gradient（圆锥渐变）
围绕中心点按角度旋转的颜色过渡效果。需指定起始角度（如0deg）及色标位置。例如：
background: conic-gradient(red, yellow, green);
表示从0度开始，依次经过红色、黄色、绿色的360度渐变，常用于制作饼图或环形效果。
4. repeating-linear-gradient（重复线性渐变）
在指定区域内重复线性渐变模式。需设置色标间距以控制重复频率。例如：
background: repeating-linear-gradient(45deg, red, blue 10px);
表示沿45度方向，每10像素重复一次红蓝渐变条纹。
5. repeating-radial-gradient（重复径向渐变）
在指定区域内重复径向渐变模式。需设置色标间距及形状。例如：
background: repeating-radial-gradient(circle, red, blue 20px);
表示以圆形为中心，每20像素重复一次红蓝渐变同心圆。
补充说明
CSS3渐变属性均支持多色标（如linear-gradient(red, yellow 50%, green)）及透明度控制（如rgba(255,0,0,0.5)）。实际应用中，可通过组合渐变类型与背景属性（如background-size、background-position）实现复杂效果。
OK，关于列举5个css3新增的属性和HTML5新增的元素有哪些的内容到此结束了，希望对大家有所帮助。