前端3+1(Day2)
css3新特性
-
是什么
-
选择器
-
新样式
-
transition
-
transform
-
animation
-
渐变
是什么
css3为css的新标准，也就是css1/2在css3里面都是可以用的
选择器
-
elemnent~element2
p~ul
选择前面有
元素的每个
- 元素
-
[attribute^=value]
a[src^='https']
选择其src属性值以https开头的每个a标签
-
[attriute$=value]
a[src$='.pdf']
选择其src属性值以.pdf结尾的每一个a标签
-
[attribute*=value]
a[scr*='abc']
选择其src属性包含’abc‘字串的每一个a标签
-
：first-of-type
p:first-of-type
选择属于其父元素的首个
元素的每个
元素
-
：last-of-type
p:last-of-type
选择属于其父元素的最后一个
元素的每一个
元素
-
：only-of-type
p:only-of-type
选择属于其父元素的唯一子元素
元素的所有
标签唯一子元素是
-
：only-child
p:only-child
选择属于其父元素的唯一子元素的所有
标签唯一子元素可以不是p元素
-
：nth-child(n)
p:nth-child(2)
选择属于其父元素的第二个子元素的每一个
标签
-
：nth-last-child(n)
p:nth-last-child(2)
选择属于其父元素的倒数第二元素的每一个p标签
-
：nth-of-type(n)
p:nth-of-type(2)
选择属于其父元素的第二个
元素的每一个
元素
-
：nth-last-of-type(n)
p:nth-last-of-type(2)
选择属于其父元素的倒数第二个
元素的每一个
元素
-
：last-child
p:last-child
选择属于父元素的最后一个子元素每一个
元素
新特性
-
边框
border-radius: 设置圆角边框 box-shadow: 为元素添加阴影(水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影) border-image: image-source image-slice(图片边界向内偏移) image-width image-outset:length|number image-repeat使用图片来绘制边框 -
背景：
background-clip:border-box|padding-box|context-box|no-clip(默认值，相当border-clip) 确定背景画区 background-origin:border-box|padding-box(默认)|content-box 规定图片是以谁的左上角对齐 background-size:contain(缩小以适合元素，维持长宽比)|cover(扩大图片来填补元素，维持长宽比)| 100px 100px(缩小的指定大)|50% 50% 设置背景图片的大小 backgroud-break:(不常用，后续补充) -
文字：
word-wrap:normal(浏览器默认的换行)|break-word(运行在单词内换行) text-overflow:clip(修剪文本)|ellipsis(显示省略符号来代表被修剪的文本) 当前行超过容器时 text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色 text-decoration:text-fill-color(文字内部填充颜色) text-stroke-color(文字边界填充颜色) text-stroke-width(文字边界宽度) -
颜色：
rgba: hala:h:色相 s:饱和度 l:亮度 a:透明度
transition过渡
可以指定为一个或多个css属性的过渡效果，多个属性之间用逗号进行分隔
teansition: css属性，花费时间，效果曲线（默认esae），延迟时间（默认0）
transform转换
允许旋转，缩放，倾斜，或者平移给定元素
-
transform:translate(120px ,50%)位移，（x,y)这种，x向右为正，y向下为正
-
transform:scale(2,0.5)缩放
-
transform：rotate(0.5turn)旋转
-
transform：skew(30deg,20deg)倾斜，尝试理解，后面：x轴向下，前面：y向右