1.高级选择器
1) 伪类选择器 基础选择器:伪类选择器
嵌套关系:
获取父元素中第一个子元素是p的元素 p:first-child
p:last-child p:nth-child(1)
并列关系: p:first-of-type p:last-of-type
p:not(.cls)
2)属性选择器: [class] [属性名=''] [属性名^='c'] [属性名$=''] [属性名*='c']
3)伪元素选择器: ::after 选择器::before
2.c3新增的样式属性
1)盒子的样式: 圆角边框: border-radius: 20px | 50%
盒子阴影: box-shadow:水平偏移量 垂直偏移量 模糊距离 阴影大小 阴影颜色 阴影的位置(outset inset)
文字阴影:text-shadow:
2)背景:
背景颜色: background-color
背景图片:background-image
背景平铺:background-repeat
背景定位:background-position
背景大小:background-size
背景的起始位置: background-origin:padding-box border-box content-box
背景裁剪:background-clip
背景颜色渐变: background: linear-gradient(left,red,green,blue,yellow);
背景综合使用:url() repeat position color /size origin clip
3) 自定义字体: @font-face{font-family src }
4) 过渡 transition:过渡属性 过渡持续的时间 过渡的速度 等待的时间,
过渡属性 过渡持续的时间 过渡的速度 等待的时间;
5) 变形: transform:
①位移:translate(x,y,z) translateX(10px) translateY() translateZ()
②缩放:scale(1.5)
③斜切:skew()
④旋转:rotate(x,y,z)
3d 显示3d效果:transform-style:preserve-3d;
透视: perspective: 1000px;
变形的原点:transform-origin
...
最新推荐文章于 2022-04-28 17:13:14 发布