9.13学习笔记

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                                             -moz-

Webkit -- Chrome,Safari,Opera                       -webkit-

Presto -- Opera                                               -o-

Trident -- IE,遨游,360,猎豹                             -ms-

 

属性选择器

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{} /*已经被选中的单选框radio或复选框checkbox*/

 

伪元素选择器(CSS3为了区分伪元素和伪类,将伪元素设置成双冒号)

div ::before{ /*在div内部的最前面动态添加一个元素*/

content:"";

}

div ::after{

content:""; /*在div内部的最后面动态添加一个元素*/

}

div ::selection{ /*在div范围内选中文字的样式*/

 

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不支持*/

}

 

    

 

 

 

今天还复习一下气泡登录框

  

 

 

 

转载于:https://www.cnblogs.com/xieyankeai/p/9642484.html