#CSS3私有前缀
-webkit-border-radius:2px; /*Chrome,Safari,Opera*/
-o-border-radius:2px; /*Opera(旧版本)*/
-ms-border-radius:2px; /*IE,遨游,360,猎豹*/
-moz-border-radius:2px; /*Firefox*/
tips:不是所有属性都需要添加4个前缀的,请参考CSS手册
#浏览器内核
Gecko -- FireFox
Webkit -- Chrome,Safari,Opera
Presto -- Opera
Trident -- IE,遨游,360,猎豹
#属性选择器
a[href]{} /*含有href属性的a标签*/
a[href="WC"]{} /*href属性值是WC的a标签*/
a[class~='x']{} /*class属性值包含x这个类的a标签*/
a[href|="a"]{} /*href属性值以a开头接横线的a标签*/
a[href^="a"]{} /*href属性值是以a开头的a标签*/
a[href$="a"]{} /*href属性值是以a结尾的a标签*/
a[href*="a"]{} /*href属性值包含a这个字母的a标签*/
#伪类选择器
a:link{} /*表示从来没有点击过*/
a:visited{} /*表示之前已经被点过了*/
a:hover{} /*表示鼠标经过当前元素*/
a:active{} /*表示鼠标按下去了*/
tips:注意顺序!!!!!
li:first-child{} /*父元素中的第一个li*/
li:last-child{} /*父元素中的最后一个li*/
li:nth-child(2) /*父元素中的第二个li*/
li:nth-child(odd) /*父元素中的所有奇数行的li*/
li:nth-child(even) /*父元素中的所有偶数行的li*/
li:nth-child(2n) /*父元素中的所有偶数行的li*/
li:nth-child(2n+1) /*父元素中的所有奇数行的li*/
li:nth-last-child() /*与nth-child类似,区别是它是从后向前数*/
-------------------
li:first-of-type{} /*同类型中的第一个*/
li:last-of-type{} /*同类型中的最后一个*/
li:nth-of-type(2){} /*同类型中排名第二的(从前向后数)*/
li:nth-last-of-type(2){}/*同类型中排名第二的(从后向前数)*/
-------------------
input:disabled{} /*被禁用的表单元素*/
input:enabled{} /*被启用的表单元素*/
input:checked{} /*已经被选中的单选框或复选框*/
#伪元素选择器(CSS3为了区分伪元素和伪类,将伪元素设置成双冒号)
div::before{ /*在div内部的最前面动态添加一个元素*/
content:"";
}
div::after{
content:""; /*在div内部的最后面动态添加一个元素*/
}
div::selection{ /*在div范围内选中文字的样式*/
background-color:yellow;
color:red;
}
input::placeholder{ /*修改文本框里placeholder的文字样式*/
color:red;
}
tips:注意浏览器前缀,参考CSS手册
#border-radius(圆角边框)
div:nth-child(1){border-radius:30px;} /*四个角*/
div:nth-child(2){border-radius:10px 50px;} /*左上,右下*/
div:nth-child(3){border-radius:10px 40px 100px;} /*左上,右上左下,右下*/
div:nth-child(4){border-radius:10px 20px 30px 4px;}/*左上,右上,右下,左下*/
div:nth-child(5){border-radius:50%;} /*50%可以变成圆形*/
div:nth-child(6){border-radius:10%/50%;} /*水平/垂直*/
#background-orgin(背景图的起始位置)
background-orgin:padding-box; /*默认从padding开始显示*/
background-orgin:content-box; /*从内容区开始显示*/
background-orgin:border-box; /*从边框开始显示*/
#background-clip(背景图的裁剪位置)
background-clip:border-box; /*默认边框以外的被裁掉*/
background-clip:padding-box; /*padding以外的被裁掉*/
background-clip:content-box; /*内容区以外的被裁掉*/
#文字遮罩效果
background-image:url(xx.jpg);
-webkit-background-clip:text; /*按照文字内容进行裁剪背景图*/
-webkit-text-fill-color:transparent; /*文字填充色为透明*/
#阴影
div{
/*盒子阴影*/
/*向右偏移1px,向下偏移5px,模糊度3px,阴影大小4px,红色,内部阴影*/
box-shadow:1px 5px 3px 4px red [inset];
/*文本阴影*/
/*向右偏移1px,向下偏移2px,模糊度3px,绿色*/
text-shadow:1px 2px 3px green;
}
#面试题：如何制作多层边框(3层)
box-shadow: 0 0 0px 5px red,0 0 0 10px green,0 0 0 15px black;
#resize(在页面上控制元素的尺寸)
普通元素:
overflow:hidden|scroll|auto;
resize:none; /*不让调整大小*/
resize:horizontal; /*横向调整*/
resize:vertical; /*纵向调整*/
resize:both; /*横纵都能调整*/
textarea
resize:xxxx; /*给textarea设置,不需要再写overflow了*/
#多列布局
父标签{
column-count:4; /*把子标签分成几列*/
column-width:100px; /*所有子标签最小宽度100*/
columns:4 100px; /*初始4列,最小100的宽度*/
column-gap:100px; /*列间距*/
column-rule:1px solid red; /*列的分割线(风格与边框一致)*/
}
子标签{
column-span:all; /*横跨所有列,Firefox不支持*/
}