背景色渐变
.gradient {
background:#BCE8F1;
background:-moz-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #BCE8F1), color-stop(100%, #3684F9));
background:-webkit-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
background:-o-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
background:-ms-linear-gradient(top, #BCE8F1 0%, #3684F9 100%);
background:linear-gradient(to bottom, #BCE8F1 0%, #3684F9 100%);
filter:progid: DXImageTransform.Microsoft.gradient( startColorstr='#BCE8F1', endColorstr='#3684F9', GradientType=0);
}
:root .gradient {
filter:none;
}
2.设置按钮button 边框颜色
button{
border-style:solid;
border-width:1px;
border-color:#388BFF;
/*border:1px;*//*不要设置border*/
}
3.设置背景透明度
style="background-color:rgba(0, 0, 0, 0.6);
background-color:rgba(212,0,0,0.2);
RGB Red Green Bule 3色!及212, 0, 0 三色的值混合.最后一个参数.0.2 则是指的透明度!1为100% 不透明!
4.若干个按钮(元素)填充某个div
.btsDiv{
display:table;
width:100%;
table-layout:fixed;
//其他
}
.bts{
//其他
display:table-cell;
}
5.圆形轮廓
.img {
border-radius:60px;
width:80px;
height:80px;
}
6.按钮边角轮廓的设置
.btn{
border-radius:2px;
border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;
}
li元素点击时高亮背景色修改
.mui-table-view-cell.mui-active {
background-color: #FFFFFF;
}
7.css的特殊性
在为同一个元素设置多个属性时,浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
权值规则如下:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 。
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
如以下代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
8.css的层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
9.重要性
有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
注意:!important要写在分号的前面
10.元素分类