把以下代码添加到css样式里即可修改checkbo样式：
[css] view plain copy
input[type=radio],input[type=checkbox] {
display: inline-block
vertical-align: middle
width: 20px
height: 20px
margin-left: 5px
-webkit-appearance: none
background-color: transparent
border: 0
outline: 0 !important
line-height: 20px
color: #d8d8d8
}
input[type=radio]:after {
content: ""
display:block
width: 20px
height: 20px
border-radius: 50%
text-align: center
line-height: 14px
font-size: 16px
color: #fff
border: 2px solid #ddd
background-color: #fff
box-sizing:border-box
}
input[type=checkbox]:after {
content: ""
display:block
width: 20px
height: 20px
text-align: center
line-height: 14px
font-size: 16px
color: #fff
border: 2px solid #ddd
background-color: #fff
box-sizing:border-box
}
input[type=checkbox]:checked:after {
border: 4px solid #ddd
background-color: #37AF6E
}
input[type=radio]:checked:after {
content: "L"
transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0)
-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0)
border-color: #37AF6E
background-color: #37AF6E
}
Html5标签：
<!--...--> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<address> 定义文档作者或拥有者的联系信息。
<applet> 不赞成使用。定义嵌入的 applet。
<area> 定义图像映射内部的区域。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体字。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi> 定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo> 定义文字方向。
<big> 定义大号文本。
<blockquote> 定义长的引用。
<body> 定义文档的主体。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> 不赞成使用。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
在很多网页中我们会看到在一个图片上面有一个半透明的色块，上面写有信息介绍，这个东西叫做蒙版，或者是遮罩。那么这个蒙版是怎么实现的呢。。。
我们看下面这段代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>蒙版||遮罩</title>
<style>
.box1 {
width: 830px
height: 470px
border: 1px solid #000
position: relative
overflow: hidden
}
.mengban{
width: 100%
height: 200px
background-color: rgba(255,0,0,.5)
position: absolute
bottom: 0
transition: all linear 1s
}
.box1:hover .mengban{
bottom: -200px
}
</style>
</head>
<body>
<div class="box1">
<img src="img/watchingU.jpg" alt="pic"/>
<div class="mmengban>XX东西 XX钱...</div>
</div>
</body>
</html>
上面的代码就是写蒙版的方式，这个只是下面的蒙版，如果要完成上下左右的蒙版都是一样的，只是定位的方向和蒙版的宽高需要自己取调整。
说到盒子的颜色，除了背景色和边框我再不清楚你指的什么颜色了。我把这两个给你写出来
背景色的，假设盒子的class='box-color'
.box-color{background-color:#ccc
}
边框颜色的，
.box-color{border:2px solid #f00
}
当然，设定这些时，盒子的宽高得指定好
.box-color{width:200px
height:200px
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）