CSS 随笔
CSS2.0
font-style font-familiy font-size font-weight
line-height color text-transform text-shadow
letter-spacing word-spacing text-decoration
text-indent text-overflow vertical-align text-align
word-wrap
background background-color background-image
background-repeat background-positon background-position-x
background-attachment
POSITON static absolute fixed relative
z-index top right buttom left ( float )
height width max-width min-width max-height min-height
clear float clip overflow overflow-x overflow-y
display visibility
margin margin-top margin-left margin-right margin-buttom
padding padding-left padding-right padding-buttom padding-top
outline outline-width outline-color outline-style
border border:1px solid orange;
border-color border-left-color border-right-color border-top-color
border-width border-left-width border-right-width border-top-width
border-style border-left-style border-right-style border-top-style
list-style === list-style-image list-style-position list-style-tope
marker-offset
border-collapse border-spacing table-layout caption-side empty-cells
speak-header
table tr { color:red }( 包含选择符 )
table>tr { color:red }
CSS2.0
Pseudo-Class
：link :hover :active :visited :focus
:first :left :right :lang :first-child
Pseudo-Elements
:after :before :first-letter :first:line
CSS3.0
border-radius //IE8及以下不支持
box-shadow //IE8及以下不支持
border-image //IE10及以下不支持
background-size //IE8及以下不支持
background-clip //IE8及以下不支持
opacity
//IE8及以下不支持
CSS3新增重要功能
Multi-column
flexBox
new FlexBox
Transform
Transiton
Animation
Image Data Types
Rules and Syntax
aniamation =
animation-name：设置动画名称
animation-duration：设置对象动画的持续时间
animation-timing-function: 设置动画的过渡类型
animation-delay：设置动画延迟多少时间开始执行
animation-iteration-count：设置对象动画的循环次数
animation-direction：设置对象动画在循环中是否反向运动
div{
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite /*number*/;
animation-direction: alternate/*normal*/;
}
@keyframes myAnimation{
from{ width:2000px;}
to{ width:200px;}
}
@keyframes myAnimation{
0%{ width:200px; }
50%{ width:150px; }
100%{ width:250px; }
}
div{ animation: myfirst 5s linear 2s infinite alternate; }
div{ animation: myfirst 5s linear 2s 10 normal; }
transiform =
transiform:translate( 20px, 20px );
transiform:translateX( 20px );
transiform:translateY( 20px );
transiform:rotate( 45deg );
transiform:scale( 0.4, 2.5 );
transiform:scaleX( 0.5 );
transiform:scaleY( 0.4 );
transiform:skew( 30deg ,30deg );
transiform:skewX( 45deg );
transiform:skewY( 30deg );
transition =
transition-property: 设置参与过渡的属性
transition-duration: 设置过渡的持续时间
transition-timing-function: 设置对象中过渡的动画类型
transition-delay: 设置延迟执行的时间
缩写方式 =
transition: border-color 5s ease-in 1s,
background 5s ease-in 1s,
color 5s ease-in 1s;
拆分方式 =
transition-property: border-color, background-color, color;
transition-duration: 5s, 5s, 5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: 1s, 1s, 1s;
渐变
linear-gradient() 线性渐变创建背景
div{
width:200px;
height:100px;
margin-top:10px;
border:1px solid #ddd;
font-size: 20px;
font-weight: 900;
color: #5bc0de;
}
#test{
background:-moz-linear-gradient(top left ,deepskyblue,orange);
background:-webkit-linear-gradient(top left ,deepskyblue,orange);
background:-o-linear-gradient(top left ,deepskyblue,orange);
background:-ms-linear-gradient(top left ,deepskyblue,orange);
background:linear-gradient(top left ,deepskyblue,orange);}
#test2{
background:-moz-linear-gradient(#000,#f00 50%,#090);
background:-webkit-linear-gradient(#000,#f00 50%,#090);
background:-o-linear-gradient(#000,#f00 50%,#090);
background:-ms-linear-gradient(#000,#f00 50%,#090);
background:linear-gradient(#000,#f00 50%,#090);}
#test3{
background:-moz-linear-gradient(left center,#000 20%,#f00 50%,#090 80%);
background:-webkit-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
background:-o-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
background:-ms-linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);
background:linear-gradient(0deg,#000 20%,#f00 50%,#090 80%);}
#test4{
background:-moz-linear-gradient(30deg,red,blue 50%,black);
background:-webkit-linear-gradient(30deg,red,blue 50%,black);
background:-o-linear-gradient(30deg,red,blue 50%,black);
background:-ms-linear-gradient(30deg,red,blue 50%,black);
background:linear-gradient(30deg,red,blue 50%,black);}
<div id="test">hello world!</div>
<div id="test2">hello world!</div>
<div id="test3">hello world!</div>
<div id="test4">hello world!</div>
linear-gradient() 线性渐变创建背景
linear-gradient(位置，颜色 百分比，颜色 百分比)
第一个值指定渐变方向，可以left从左向右，top从上向下
left top 从左上角到右下角；
另外一种写法是角度，
45deg 表示从左下角开始45度渐变，负值表示从左上角开始渐变
第一个颜色表示开始渐变的第一个颜色，百分比表示渐变在整个div背景中所占的比列，
最后一个颜色如果没有百分比，则表示终止时渐变到这个颜色停止，如果加了百分比，表示到了百分比的位置就不会渐变了，而是纯色，颜色为最后一个颜色。
background: -webkit-linear-gradient(left,orange 20%,darkorchid 40%,blue 45%);
