浏览器兼容及css3属性基础

浏览器兼容问题解决方法

1.特殊符号

下划线：IE6及以下版本能识别
星号：IE8，9，10不能用
！important：火狐，IE7能识别
-----------------------结合资料掌握

2.条件注释法：

a.在IE下生效
<!--[if IE]>内容<![end if]-->
b.在IE6下生效
<!--[if IE6]>内容<![end if]-->
c.在IE6及以上版本下生效
<!--[if IE]>内容<![end if]-->
d.在IE下生效
<!--[if gte IE6]>内容<![end if]-->
e.在IE8下生效
<!--[if!IE8]>内容<![end if]-->
f.非IE下生效
<!--[if!IE]>内容<![end if]-->

css常用选择器集合

.div       选择 class="div" 的所有元素。
#div       选择 id="div" 的所有元素。
* *        选择所有元素。
p         选择所有 <p> 元素。
div,p      选择所有 <div> 元素和所有 <p> 元素。
div p      选择 <div> 元素内部的所有 <p> 元素。
div>p      选择父元素为 <div> 元素的所有 <p> 元素。
div+p      选择紧接在 <div> 元素之后的所有 <p> 元素。

[target]   选择带有 target 属性所有元素。
[target=_blank] 选择 target="_blank" 的所有元素。
d p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
p:before   在每个 <p> 元素的内容之前插入内容。
p:after    在每个 <p> 元素的内容之后插入内容。
p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
p~ul       选择前面有 <p> 元素的每个 <ul> 元素。

p:first-of-type   选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type    选择属于其父元素的最后 <p> 元素的每个 <p> 元 素。
p:only-of-type    选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child      选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(n)    选择属于其父元素的第n个子元素的每个 <p> 元素
p:nth-last-child(n) 同上，从最后一个子元素开始计数。
p:nth-of-type(n)  选择属于其父元素第n个 <p> 元素的每个 <p> 元素。
p:nth-last-of-type(n) 同上，但是从最后一个子元素开始计数。
p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。

:root      选择文档的根元素。
p:empty    选择没有子元素的每个 <p> 元素（包括文本节点）。
input:enabled 选择每个启用的 <input> 元素。
input:disabled 选择每个禁用的 <input> 元素
input:checked 选择每个被选中的 <input> 元素。
:not(p)    选择非 <p> 元素的每个元素。
::selection 选择被用户选取的元素部分。

CSS3边框属性

圆角边框

border-radius:1px 2px 3px 4px   表示边框的四个角左上，右上，右下，左下是以1，2，3，4px为半径的圆。
border-radius:1px 2px 3px 4px/4px 3px 2px 1px  表示边框的四个角左上，右上，右下，左下是以1/4，2/3，3/2，4/1px为半径的椭圆，斜线前表示X方向半径，斜线后表示y方向半径。

阴影边框

box-shadow:inset 1px 2px 3px 4px black;
inset代表内阴影，不写则代表外阴影
1px代表x方向的阴影，正值为方向为右
2px代表y方向的阴影，正值为方向为下
3px代表阴影羽化程度值
4px代表阴影延伸值 只能为正值
black代表阴影颜色

图片边框

border-image:url() 30/40px stretch
30代表切割的位置多少
40px代表显示的边框宽度 也可以在边框宽度先设置好
stretch代表填充方式拉伸，还有repeat平铺，round铺满

CSS3背景属性

background-clip 规定背景的绘制区域。

border-box 背景被裁剪到边框盒 即从边框往里显示背景图。
padding-box 背景被裁剪到内边距框 即从内边距框往里显示背景图。。
content-box 背景被裁剪到内容框 即从内容区域显示背景图。。

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

（背景开始显示的起点定位，图片的大小不会变化）

padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。

background-size 规定背景图片的尺寸。

（通常可以用数值以及百分比来设置） 还需掌握： cover 扩大图片至每一个边都延伸至边框 contain 扩大图片有一边延伸至边框即可

加多张背景图片

加图片的顺序1，2.3.。。。n。则显示在最上层的是1，最下层的是n

文本属性

超出部分用...显示

text-overflow:clip

文本不换行

white-space：nowrap

文本自动换行

word-break:break-all或者
word-wrap:break-all

文本阴影

text-shadow:2px 3px 4px black;
2px代表x方向的阴影，正值为方向为右
3px代表y方向的阴影，正值为方向为下
4px代表阴影羽化值
black代表阴影颜色