CSS3高级选择器与边框效果-优快云博客

css3高级选择器
p:first-of-type : 返回其父元素指定的首个p元素

p:last-of-type : 返回指定p元素的最后一个

p:first-child : 返回其父元素的首个子元素p

p:last-child : 返回其父元素的最后一个子元素p

p:nth-child(n) : 返回父元素的第n个子元素p元素

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；

CSS3 边框

用 CSS3，你可以创建圆角边框，添加阴影框

·         border-radius  圆角边框  ---------->5px  或  5%   可以给一个值到四个值

·         box-shadow  阴影边框   ------>六个值(前两个值必写)  单位 : px

水平阴影(可负值) 垂直阴影(可负值) 模糊距离 阴影尺寸 阴影颜色  外部阴影(outset)改为内部阴影(inset) 

•	     border-image  用图片创建边框----了解

transition

简写属性，用于在一个属性中设置四个过渡属性。

过度属性

transition-property

规定应用过渡的 CSS 属性的名称。

transition-duration

定义过渡效果花费的时间。默认是 0。
transition-timing-function

规定过渡效果的时间曲线。默认是 “ease”。

transition-delay

规定过渡效果何时开始。默认是 0。

移动属性

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
缩放属性
transform:scale(0.8,1);
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）