A4465643的博客

CSS3 3D 球体自转特效 transform-style: preserve-3d;设置父级元素，它的子级元素具有3d效果,再设置子元素沿Y 轴的 3D 旋转。 [注：线条看个人喜欢适当减少] html代码如下 <div class="box"> <div class="star"> <div class="starline"></div> <div class="starline"></

3D : transform-style: 容器是否为3D preserve-3d; 3D场景 flat; 2D场景 translate() 偏移 translateZ() 沿Z轴偏移 transform:translate3d(X,Y,Z); transform :rotate()旋转 默认是沿Z轴 transform:rota

层级选择器： .box1>p{ //子选择器 ,父子关系 } .box1+.box2{ //相邻兄弟选择器 ， 只能往下选择 background-color: aquamarine; } .box1~div 通用选择器 同级元素 .box1 后面的所有元素 ##属性选择器 E[attr]:只使用属性名，但没有确定任何属性值 E[attr=“value”]:指定属性名，并指定了该属性的属性值 E[attr~=“value”]:指定属性

2D transform transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() translate() 元素向指定的方向移动,类似于position中的relative。(偏移) translate (x轴位移的值 ) translateY (y轴位移的值) translate(X,Y) 位移的值可为负数，是加了单位的属性值 。 scale(1,0.5)

前缀&渐变&过渡 浏览器私有前缀 -ms- 内核 IE浏览器专属的CSS属性需添加一ms前缀 -moz- 所有基于Gecko引擎的浏览器(如Firefox) 专属的cSS属性需添加-moz前缀 -0- Opera浏览器专属的CsS属性需添加-0-前缀 -webkit- 所有基于Webkit引擎的浏览器( 如Chrome、Safari) 专属 渐变 渐变: 背景色渐变 线性渐变 和 径向渐变 线性渐变 : background: linear-gradient();