在浏览器中checkbox是经常使用的勾选框，但是，checkbox不能放大缩小，在页面字体都放大了的时候，checkbox框大小不变，很影响美观。最近发现一个CSS3制作的checkbox，除了IE支持不好外，其它使用都很好。代码如下，效果见图。
checkbox button
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>Checkboxes and CSS3</title>
6 <style type="text/css" media="screen">
7 .switch {
8 margin: 50px auto;
9 position: relative;
10 }
11
12 .switch label {
13 width: 100%;
14 height: 100%;
15 position: relative;
16 display: block;
17 }
18
19 .switch input {
20 top: 0;
21 right: 0;
22 bottom: 0;
23 left: 0;
24 opacity: 0;/*opacity取值为1的元素是完全不透明的，反之，取值为0是完全透明的，看不见的。1到0之间的任何值都表示该元素的透明程度。*/
25 z-index: 100;
26 position: absolute;
27 width: 100%;
28 height: 100%;
29 cursor: pointer;
30 }
31 .switch.demo1 {
32 width: 100px;
33 height: 100px;
34 }
35
36 .switch.demo1 label {
37 border-radius: 50%;
38 background: #eaeaea;
39 box-shadow: 0 3px 5px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -5px 5px rgba(100,100,100,0.1), inset 0 5px 5px rgba(255,255,255,0.3);
40 }
41
42 .switch.demo1 label:after {
43 content: "";
44 position: absolute;
45 top: -8%;
46 right: -8%;
47 bottom: -8%;
48 left: -8%;
49 z-index: -1;
50 border-radius: inherit;
51 background: #ddd;
52 background: -moz-linear-gradient(#ccc, #fff);
53 background: -ms-linear-gradient(#ccc, #fff);
54 background: -o-linear-gradient(#ccc, #fff);
55 background: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#fff));
56 background: -webkit-linear-gradient(#ccc, #fff);
57 background: linear-gradient(#ccc, #fff);
58 box-shadow: inset 0 2px 1px rgba(0,0,0,0.15), 0 2px 5px rgba(200,200,200,0.1);
59 }
60
61 .switch.demo1 label:before {
62 content: "";
63 position: absolute;
64 width: 20%;
65 height: 20%;
66 border-radius: inherit;
67 left: 40%;
68 top: 40%;
69 background: #969696;
70 background: radial-gradient(40% 35%, #ccc, #969696 60%);
71 box-shadow: inset 0 2px 4px 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,1), inset 0 1px 0 white;
72 }
73
74 .switch.demo1 input:checked+ label {
75 background: #dedede;
76 background: -moz-linear-gradient(#dedede, #fdfdfd);
77 background: -ms-linear-gradient(#dedede, #fdfdfd);
78 background: -o-linear-gradient(#dedede, #fdfdfd);
79 background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), to(#fdfdfd));
80 background: -webkit-linear-gradient(#dedede, #fdfdfd);
81 background: linear-gradient(#dedede, #fdfdfd);
82 }
83
84 .switch.demo1 input:checked+ label:before {
85 background: #25d025;
86 background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
87 box-shadow: inset 0 3px 5px 1px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.4), 0 0 10px 2px rgba(0, 210, 0, 0.5);
88 }
89
90 </style>
91 </head>
92 <body>
93 <div class="container">
94 <section class="main">
95
96 <div class="switch demo1">
97 <input type="checkbox">
98 <label></label>
99 </div>
100
101 <div class="switch demo1">
102 <input type="checkbox" checked>
103 <label></label>
104 </div>
105
106 </section>
107
108 </div>
109 </body>
110 </html>
在这中有几处用到不是很熟悉CSS的地方，做个记录。border-radius、box-shadow、z-index、linear-gradient、"rgba(R,G,B,A)"、CSS状态伪类选择符 E:checked。
一、border-radius
语法：border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
默认值：0
取值：
<length>：用长度值设置对象的圆角半径长度。不允许负值
<percentage>：用百分比设置对象的圆角半径长度。不允许负值
说明：
设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
- 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
- 如果只提供一个，将用于全部的于四个角。
- 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。
- 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。
- 垂直半径也遵循以上4点。
- 对应的脚本特性为borderRadius。
兼容性：
示例代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS border-radius_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="phpstudy.net" />
<meta name="copyright" content="www.phpstudy.net" />
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时：</h2>
<ul class="test">
<li class="one">提供1个参数<br />border-radius:10px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时：</h2>
<ul class="test2">
<li class="one">提供1个参数<br />border-radius:10px/5px;</li>
<li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
<li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
<li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>
二、box-shadow
语法：box-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = inset? && [ <length>{2,4} && <color>? ]
默认值： none
取值：
none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④：如果提供了第4个长度值则用来设置对象的阴影外延值。不允许负值
<color>：设置对象的阴影的颜色。请参阅颜色值
inset： 设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影
说明：设置或检索对象阴影。参阅text-shadow属性
可以设定多组效果，每组参数值以逗号分隔。
对应的脚本特性为boxShadow。
兼容性：
示例代码
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="utf-8" />
5 <title>CSS box-shadow_CSS参考手册_web前端开发参考手册系列</title>
6 <meta name="author" content="phpstudy.net" />
7 <meta name="copyright" content="www.phpstudy.net" />
8 <style>
9 .test li{margin-top:20px;list-style:none;}
10 .test .outset{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px 5px rgba(0,0,0,.6);box-shadow:5px 5px rgba(0,0,0,.6);}
11 .test .outset-blur{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px 5px 5px rgba(0,0,0,.6);box-shadow:5px 5px 5px rgba(0,0,0,.6);}
12 .test .outset-extension{width:400px;padding:10px;background:#eee;-webkit-box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);}
13 .test .inset{width:400px;padding:10px;background:#eee;-webkit-box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;}
14 .test .multiple-shadow{width:400px;padding:10px;background:#eee;-webkit-box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);box-shadow:0 0 5px 3px rgba(255,0,0,.6),0 0 5px 6px rgba(0,182,0,.6),0 0 5px 10px rgba(255,255,0,.6);}
15 </style>
16 </head>
17 <body>
18 <ul class="test">
19 <li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>
20 <li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
21 <li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
22 <li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
23 <li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
24 </ul>
25 </body>
26 </html>
三、z-index
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
说明:
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
四、linear-gradient
linear-gradient：线性渐变，详细见博文：CatherineGao
五、rgba(R,G,B,A)
"rgba(R,G,B,A)" 形式的字符串。在这种形式中，R、G 和 B 将颜色的红色、绿色和蓝色成分指定为 0 到 255 之间的十进制整数，并且 A 把 alpha（不透明）成分指定为 0.0 （完全透明）和 1.0 （完全不透明）之间的一个浮点数值。例如，半透明的完全红色为 "rgba(255,0,0,0.5)"。
六、CSS状态伪类选择符 E:checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)。
兼容性：
CSS状态伪类选择符示例代码
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS 用户界面(UI)元素状态伪类选择符 E:checked_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="phpstudy.net" />
<meta name="copyright" content="www.phpstudy.net" />
<style>
input:checked+ span {
background: #f00;
}
input:checked+ span:after {
content: " 我被选中了";
}
</style>
</head>
<body>
<form method="post" action="#">
<fieldset>
<legend>
选中下面的项试试
</legend>
<ul>
<li>
<label>
<input type="radio" name="colour-group" value="0" />
<span>蓝色</span></label>
</li>
<li>
<label>
<input type="radio" name="colour-group" value="1" />
<span>红色</span></label>
</li>
<li>
<label>
<input type="radio" name="colour-group" value="2" />
<span>黑色</span></label>
</li>
</ul>
</fieldset>
<fieldset>
<legend>
选中下面的项试试
</legend>
<ul>
<li>
<label>
<input type="checkbox" name="colour-group2" value="0" />
<span>蓝色</span></label>
</li>
<li>
<label>
<input type="checkbox" name="colour-group2" value="1" />
<span>红色</span></label>
</li>
<li>
<label>
<input type="checkbox" name="colour-group2" value="2" />
<span>黑色</span></label>
</li>
</ul>
</fieldset>
</form>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
