H5和CSS3
2019-06-15 本文已影响0人
繁花似锦之流年似水
1、CSS权重
CSS权重指的是样式的优先级,当有多个样式作用于元素的时候,权重值大的样式起作用。权重一样的时候,后面的样式会覆盖前面的样式。权重的等级
![](https://img.haomeiwen.com/i15674568/626535407eea2e1a.png)
如果是组选择器,权重的值是多个选择器叠加的值
2、CSS3新增的选择器
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1,如
![](https://img.haomeiwen.com/i15674568/4cd61defa38f765e.png)
【注】这里的E指的是匹配的HTML元素,可以用来匹配奇数行和偶数行。这个会先统计出父元素下2n+1行元素,然后匹配E。得到最后匹配的内容
E:nth-child(n) 和E:nth-of-type(n)
![](https://img.haomeiwen.com/i15674568/38041aa8dd25452f.png)
3、CSS3圆角、阴影、RGBA
圆角
border-radius: 35px;
【注】百分比设置的是每个盒子元素长宽的百分比,设置px设置的是长宽的像素值
![](https://img.haomeiwen.com/i15674568/676074458b832c64.png)
阴影:包括内阴影和外阴影
![](https://img.haomeiwen.com/i15674568/ac8eb917196b7b2b.png)
设置内阴影:box-shadow: 0 0 10px 2px #efabab inset; 发光效果
设置透明度
![](https://img.haomeiwen.com/i15674568/9b3c89335b5d264d.png)
cpacity设置透明度,可以设置背景颜色和背景图片的透明度
![](https://img.haomeiwen.com/i15674568/aabb3b3eb8aa080c.png)
【注】设置背景透明,上面文字依然保持清晰度使用RGBA,这样设置
![](https://img.haomeiwen.com/i15674568/9f2974f012d9eab8.png)
背景色不使用background-color: mediumvioletred;这种形式
4、动画transition【过渡】
![](https://img.haomeiwen.com/i15674568/85ef6ec2d610f13f.png)
这里的动画指的是鼠标放到元素上去,元素的样式发生变化。可以设置长度、宽度、位置、圆角等很多属性的动画。
![](https://img.haomeiwen.com/i15674568/c2b228fc507ebb14.png)
【注】transition:all 1s ease all表示设置所有变化的属性,不显示说明
5、设置元素变形transform
![](https://img.haomeiwen.com/i15674568/20216521e6f708eb.png)
设置位移的偏移:这个性能高于元素定位left和right的偏移,且不会影响文档流