前端技术不错的学习网站:前端观察——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;
}
未完待续