css3新特性

目录

结构伪类选择器属性

CSS3 圆角边框

CSS3盒阴影

媒体查询

---

结构伪类选择器属性

:first-child选择某个元素的第一个子元素；
:last-child选择某个元素的最后一个子元素；
:nth-child(n)选择某个元素的一个或多个子元素；
:nth-last-child(n)选择某个元素的一个或多个特定的子元素；从这个元素的 最后一个子元素开始算；
:nth-of-type(n)选择指定的元素；
:nth-last-of-type(n)选择指定的元素，从元素最后一个开始计算；
first-of-type()选择选择一个上级元素下得第一个同类子元素；
:last-of-type(n)选择选择一个上级元素最后一个同类子元素；

CSS3 圆角边框

CSS3中border-radius属性是用于创建圆角的 

语法

div {
    width: 100px;
    height: 100px;
    /* border-radius: 25px; */
    border-radius: 25%;
}

border-radius：n1, n2, n3, n4 
/* n1 - n4 分别代表左上角、右上角、右下角、左下角 ，值可为百分比或像素值*/

 CSS3盒阴影

CSS3中的box-shadow属性被用来添加阴影 

div 
{ 
    width: 100px;
    height: 100px;
    background-color: yellow;
	box-shadow: 10px 10px 5px #888888 inset; 
}

box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向
（默认是从里往外，设置inset就是从外往里）