CSS3学习总结

来源：互联网发布：淘宝旺铺多少钱编辑：程序博客网时间：2024/04/30 09:48

前端技术不错的学习网站：前端观察——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;

}

未完待续

0 0