CSS3选择器
CSS3选择器
属性选择器
element[name=value];name=vlaue 的元素；
示例:input各种type
input[type=text]{background: red;}
element[name]:只要包含name的元素；
示例: <div type></div>
*[type]{background:red}
element[name~=vlaue]:包含value整个单词的元素;
示例：<div title="apple banana"></div>
div[title~=apple]{backgrund:red;}
element[name*=vlaue]:包含value这个字母的元素;
示例：<div title="apple a banana"></div>
div[title*=apple]{backgrund:red;}
element[name^=vlaue]:以value开头的元素;
element[name$=value]:以value结尾的元素;
element[name|=value]:以整个是value或者以value-开头的元素;
element[name1][name2]{background:red;}拥有多个name的元素;
伪类选择器
element:nth-child(n){}:正着数第n个element;
element:nth-last-child(n):倒着数第n个element;
element:nth-child(2n):偶数行;--->element:nth-child(even)
element:nth-child(2n-1):奇数行;--->element:nth-child(odd)
element:first-child{}第一个元素;
element:last-child{}最后一个元素;
element:empty{}空元素;没有内容的元素;
element:disabled{}不可用的元素,一般指的是表单元素;
element:enabled{}:激活的可用的元素,一般指的是表单元素;
element:checked{}选中的元素,指的是表单元素，比如：radio
element:target{}被选中的元素;比如选项卡;
element:nth-last-child(n){}:倒数第N个元素;--->element:nth-last-child(1):倒数第一个元素;
element:nth-of-type(1):所有类型里面的第N个元素;
element:nth-last-of-type(1):所有类型里面倒数第1个元素;
element~obj{}选择element下面的兄弟元素;
element>obj{}选择子元素;
element:not(.class){}不包含某个class的元素;
element:first-line{}第一行文字;
element:first-letter{}:第一个文字;
element::selection{}选中的文本，文字;
::selection{}所有选中的文字,--->*selection{}所有选中的文字;
element::after{}文本的前面添加东西，配合content:'asd'
element::before{}文本的后面的添加东西;配合content:'adsa'
CSS3新的样式
css3新的样式有些浏览器不兼容,需要加浏览器前缀:
-webkit-:chrome,opera,safari,
-moz-:firefox,
-ms-:microsoft,
-o-:opera,
s
-
transform:rotate(30deg)—->deg:角度;
案例:点击div旋转;
obj.style.transform = "rotate(30deg)"; js封装; -
动画
运动形式： linear ease ease-in ease-out ease-in-out 基础动画：transition,想运动谁,就把动画加给谁; transition: 时间 要运动的属性[width,height,background···] 运动形式; 运动多个属性,以逗号隔开;transition:1s width ease,1s height ease, 1s background ease-in; 高机动画: 定义动画： @keyframes 动画名称{ form {} to{} } 执行动画：animation： 时间 动画名称 运动形式 -
圆角
border-radius: 10px | 50%; border-radius: 10px 20px; 上下10px，左右20px； border-radius:100px 20px 50px ;上100px 左右20px，下50px； border-radius: 100px 50px ;上下100px，左右50px； border-radius: 10px/30px--->x/y: x轴[水平]，y轴[垂直]； -
颜色的表达方式
rgba(0,0,0,.5);//黑色半透明;
-
文字阴影
text-shadow: 1px 1px 4px red; x轴 y轴 模糊度 颜色; -
文字描边
text-stroker: 1px red; -
块阴影
box-shadow: 1px 1px 4px red; x轴 y轴 模糊度 颜色; box-shadow: insert 1px 1px 4px red;内阴影; box-shadow: outer 1px 1px 4ps red ;外阴影; box-shadow: 1px 1px 4px 5px red; x轴 y轴 模糊度 扩展 颜色; box-shadow: [insert] x轴 y轴 blur [spread] color ---->[]中的参数可有可无,insert为内阴影,spread为扩展;如果需要叠加多个颜色,以逗号隔开; -
渐变
线性渐变： background:linear-gradient(color1,color2···): background:linear-gradient(left,top,right,bottom,color1,color2···)方向:left,right,top,bottom, left top··· background:linear-gradient(left,top,right,bottom,color1,color2···)方向:0deg:left,90deg:bottom; 渐变区域大小： -webkit-gradient(方向,color 大小,color2 大小····); 径向渐变： background:-webkit-radial-gradient(x y,color1,color2····)x,y代表的是形状,也可以用英文单词代替,圆形[circle]和椭圆形[ellipse]; background:-webkit-radial-gradient(x y,x y,color1,color2····):第一个xy代表的是圆心的位置,可以用left,right,top,bottom代替，也可以使用数值加单位的形式代替,第二个x y 代表的是形状,也可以用单词代替,圆形[circle]和椭圆形[ellipse] 重复渐变: background:-webkit-repeating-liinear-gradient(red 0px,blue 10px): -
蒙版
-webkit-mask:url(1.png);—->特点:有颜色的地方会显示出来,跟颜色无关;用PS做一个透明的图片,覆盖到div上就可以了.
-
倒影
-webkit-box-reflext: 方向 距离 渐变; 方向取值： 下：below, 上above 右right 左left -
文字排列
direction: ltr | rtl |;left to right | right to left; 此样式需要配合Unicode-bidi:bidi-override才可以生效; -
变形
transform: rotate(30deg):旋转 scale(x,y):缩放--->scaleX();--->scaleY(); translate(x,y):平移--->translateX();--->translateY(); skew(x,y):倾斜度 以上样式,物体的本身并没有发生变化,盒子模型也没有发生变化,位置信息也没有发生变化;也就是说并不会引起浏览器重绘重排,性能比较高;只是视觉上发生了变化; 案例:CSS3时钟; transform-origin: 旋转中心点;也可以理解成绕着哪个坐标开始转; center center left center rigth center ***transform多个值同时写的时候,先写的后生效,比如:旋转60deg,缩放2倍,横向平移300px应该写成: transform:translateX(300px) sclae(2) rotate(deg);
3D
坐标:
x:
y:
z:
**面朝坐标轴,顺时针旋转;
transform:
rotateX():
rotateY():
rotateZ():
3D需要配合透视(景深)来使用,透视/景深:观察物体的远近程度;
perspective:取值number+单位;此属性加给要变化的物体;比如:perspective(800px)