CSS3学习总结

前端技术不错的学习网站：前端观察——http://www.qianduan.net/

                                          http://isux.tencent.com/

CSS3技术参考：http://www.zhangxinxu.com/wordpress/?p=734

                           http://www.zhangxinxu.com/php/

颜色渐变：

{ 

   background: -webkit-gradient(    linear,    left top,    left bottom,    color-stop(0.0, #fff),    color-stop(1.0, #f6c8ac)   );

}

button的样式——渐变、叠加：

{
    border: 1px solid #689207;
    color: #fff;
    background: -webkit-gradient(
           linear,
           left top,
           left bottom,
          color-stop(0, #bbe17c),
           color-stop(0.1, #90cb2c),
           color-stop(0.48, #9fd546),
           color-stop(0.51, #81c80d),
           color-stop(1, #7ec509)
    );
    text-shadow: 1px 1px 3px #666;
}

文字发光：

{

    transition: color 0.2s linear 0s, background-color 0.2s linear 0s, border-color 0.2s linear 0s;

}

div左上角、左下角添加圆角：

{

     border-bottom-left-radius: 20px;
     border-top-left-radius: 20px;

}

改变单选按钮、复选框的样式：

input[type=checkbox]:checked + label:before {
       content: "\2713";
}
input[type=radio]:checked + label:before{
content: "•";
}
label:before{
       content: "";
display: inline-block;
position: relative;

text-align: center;
margin: 2px 8px 0 0;

cursor: pointer;

}

.ProductOptionList  .RadioButton {

       display:none;

}

.ProductOptionList  label:before{    
        border:1px solid #f27020;
border-radius:15px;
color:#f27020;
width: 10px;
height: 10px;
line-height: 10px;
        font-size: 1em;
background:#fff;

}

未完待续