CSS3之01-checkbox button

在浏览器中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>

posted @ 2012-12-15 23:36 kekuixiong 阅读(409) 评论(0) 收藏举报

刷新页面返回顶部

逆风飞扬

——Today is the first day of the rest of your life.

CSS3之01-checkbox button

公告