css3新的功能
1.属性选择器
[id=articel]{ color:red; } [id*=articel]{ color:red; } [id^=articel]{ color:red; } [id$=articel]{ color:red; }
2.伪类选择器
:first-child选择某个元素的第一个子元素;
- :last-child选择某个元素的最后一个子元素;
- :nth-child()选择某个元素的一个或多个特定的子元素;
- :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
- :nth-of-type()选择指定的元素;
- :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
- :first-of-type选择一个上级元素下的第一个同类子元素;
- :last-of-type选择一个上级元素的最后一个同类子元素;
- :only-child选择的元素是它的父元素的唯一一个了元素;
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
- :empty选择的元素里面没有任何内容。
- :before和:after,在元素前边和后边添加内容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3样式</title> <style type="text/css"> p:before{ content:'前面的文字' } p:after{ content:"后面的内容" } </style> <head> <body> <p>p的内容</p> </body> </html>
box-shadow元素阴影.shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); }
释义为:横向偏移3像素,纵向偏移3像素,模糊4像素,颜色为纯黑。- text-shadow文字阴影
- text-shadow:color length length length;
- color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径”
- 正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上.
- 其中任意一个值可以为零也可为空(将做默认处理)
相关推荐
donghedonghe 2013-05-31
tdeclipse 2011-02-28
Ladyseven 2020-07-25
pigsmall 2020-11-19
SXIAOYI 2020-09-16
whileinsist 2020-06-24
gufudhn 2020-06-12
冰蝶 2020-06-05
LinuxAndroidAI 2020-06-04
supperme 2020-05-28
yaodilu 2020-05-10
e度空间 2020-04-27
云端漂移 2020-04-09
peterwzc 2020-03-17
有心就有方向 2012-09-03
ebuild 2013-05-14
linuxprobe0 2013-04-15
linuxprobe0 2013-04-01