close
来源：NETWORK
CSS.3.0的出现，对网页设计师来说无疑是一个很大的惊喜，仔细看完各项功能，大致整理出了一些个人认为比较实用的更新。当然，我们要想在设计中用到CSS3.0，估计要等到五年以后吧。
border：
border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?
有了这个属性，设计师再也不用费劲心思去研究圆角的实现方式了。
background：
background-origin ： border | padding | content
border：
从border区域开始显示背景。
padding：
从padding区域开始显示背景。
content：
从content区域开始显示背景。
background-clip ： border-box | padding-box | content-box | no-clip
border-box：
从border区域向外裁剪背景。
padding-box：
从padding区域向外裁剪背景。
content-box：
从content区域向外裁剪背景。
no-clip：
从border区域向外裁剪背景。
background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain
multiple backgrounds:可以把多个背景图片写到一起，既节省代码，又方便控制。
有了这几个属性，背景图的位置变得更加灵活。
color：
opacity ： <length> | inherit
这个属性的最大用处就是设置文字或图片的透明度，很实用。
text：
text-overflow ： clip | ellipsis
clip：
不显示省略标记（…），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（…）
相信大多数人都很熟悉这个属性的，也是我们梦寐以求的标签之一。
generated content：
content ： normal | string | attr() | uri() | counter()clip：
content用于插入生成内容；
content属性与 :before 及 :after 伪元素配合使用，将生成内容放在一个元素内容的前面或后面。
other modules：
columns：宽度 || 栏目数
这个功能很不错的，可以让设置内容以几栏显示，以及每栏的宽度。配套的还有很多相关属性。
@font-face：：{属性: 取值;}
有了它你就可以自定义字体了，用src链接到你的字体路径就ok。
而事实上css3.0最为强大的地方在于css3.0的选择器，可以帮助我们很轻松的实现以往那些很复杂的效果，用过jquery的应该不会对这些陌生。
p[title^="val"] {color:#FF0000;}选择所有title以value开头的元素
p[title$="val"] {font-weight:bold;}选择所有title以value结尾的元素
p[title*="val"] {text-decoration:underline;}选择所有title里包含value的元素
p:nth-child(n) {color:#FF0000;}匹配父元素中的第n个结构子元素
p:nth-last-child(n){color:#FF0000;}匹配父元素中的倒数第n个结构子元素
p:nth-of-type(n) {color:#FF0000;}匹配同类型中的第n个同级兄弟元素
p:nth-last-of-type(n) {color:#FF0000;}匹配同类型中的倒数第n个同级兄弟元素
p:last-child {color:#FF0000;}匹配父元素中的最后一个子元素
p:first-of-type{color:#FF0000;}匹配同类型中的第一个同级兄弟元素
p:only-child {color:#FF0000;}匹配属于父元素中唯一子元素的
p:only-of-type {color:#FF0000;}匹配属于同类型中唯一兄弟元素的
p:empty {background-color:#EEEEEE;}匹配没有任何子元素（包括text节点）的元素
input:checked {margin:0 50px;}匹配所有用户界面（form表单）中处于选中状态的元素
input:enabled {background-color:#FF0000;}匹配所有用户界面（form表单）中处于可用状态的元素
input:disabled {border:1px solid #FF0000;}匹配所有用户界面（form表单）中处于不可用状态的元素
p::selection {background-color:#00FF00;}匹配元素中被用户选中或处于高亮状态的部分
p:not(s) {background-color:#00FF00;}匹配所有不匹配简单选择符s的元素
div ~ p {background-color:#00FF00;} ||||E ~ F ： {attribute}匹配E元素之后的F元素
css3.0+html5确实是很强大的，不过也许真到那一天的时候，我们又会想念现在这种想尽办法去实现想要效果的生活，也会少了这其中所包含的乐趣了。就好像如果真的没了ie6，也就没了与ie6斗其乐无穷的体验了。
border：
border-radius ： none | <length>{1,4} [ / <length>{1,4} ]?
有了这个属性，设计师再也不用费劲心思去研究圆角的实现方式了。
background：
background-origin ： border | padding | content
border：
从border区域开始显示背景。
padding：
从padding区域开始显示背景。
content：
从content区域开始显示背景。
background-clip ： border-box | padding-box | content-box | no-clip
border-box：
从border区域向外裁剪背景。
padding-box：
从padding区域向外裁剪背景。
content-box：
从content区域向外裁剪背景。
no-clip：
从border区域向外裁剪背景。
background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain
multiple backgrounds:可以把多个背景图片写到一起，既节省代码，又方便控制。
有了这几个属性，背景图的位置变得更加灵活。
color：
opacity ： <length> | inherit
这个属性的最大用处就是设置文字或图片的透明度，很实用。
text：
text-overflow ： clip | ellipsis
clip：
不显示省略标记（…），而是简单的裁切。
ellipsis：
当对象内文本溢出时显示省略标记（…）
相信大多数人都很熟悉这个属性的，也是我们梦寐以求的标签之一。
generated content：
content ： normal | string | attr() | uri() | counter()clip：
content用于插入生成内容；
content属性与 :before 及 :after 伪元素配合使用，将生成内容放在一个元素内容的前面或后面。
other modules：
columns：宽度 || 栏目数
这个功能很不错的，可以让设置内容以几栏显示，以及每栏的宽度。配套的还有很多相关属性。
@font-face：：{属性: 取值;}
有了它你就可以自定义字体了，用src链接到你的字体路径就ok。
而事实上css3.0最为强大的地方在于css3.0的选择器，可以帮助我们很轻松的实现以往那些很复杂的效果，用过jquery的应该不会对这些陌生。
p[title^="val"] {color:#FF0000;}选择所有title以value开头的元素
p[title$="val"] {font-weight:bold;}选择所有title以value结尾的元素
p[title*="val"] {text-decoration:underline;}选择所有title里包含value的元素
p:nth-child(n) {color:#FF0000;}匹配父元素中的第n个结构子元素
p:nth-last-child(n){color:#FF0000;}匹配父元素中的倒数第n个结构子元素
p:nth-of-type(n) {color:#FF0000;}匹配同类型中的第n个同级兄弟元素
p:nth-last-of-type(n) {color:#FF0000;}匹配同类型中的倒数第n个同级兄弟元素
p:last-child {color:#FF0000;}匹配父元素中的最后一个子元素
p:first-of-type{color:#FF0000;}匹配同类型中的第一个同级兄弟元素
p:only-child {color:#FF0000;}匹配属于父元素中唯一子元素的
p:only-of-type {color:#FF0000;}匹配属于同类型中唯一兄弟元素的
p:empty {background-color:#EEEEEE;}匹配没有任何子元素（包括text节点）的元素
input:checked {margin:0 50px;}匹配所有用户界面（form表单）中处于选中状态的元素
input:enabled {background-color:#FF0000;}匹配所有用户界面（form表单）中处于可用状态的元素
input:disabled {border:1px solid #FF0000;}匹配所有用户界面（form表单）中处于不可用状态的元素
p::selection {background-color:#00FF00;}匹配元素中被用户选中或处于高亮状态的部分
p:not(s) {background-color:#00FF00;}匹配所有不匹配简单选择符s的元素
div ~ p {background-color:#00FF00;} ||||E ~ F ： {attribute}匹配E元素之后的F元素
css3.0+html5确实是很强大的，不过也许真到那一天的时候，我们又会想念现在这种想尽办法去实现想要效果的生活，也会少了这其中所包含的乐趣了。就好像如果真的没了ie6，也就没了与ie6斗其乐无穷的体验了。
全站熱搜
留言列表
