甜橘子，专注成都网站制作网站设计与营销型网站建设与优化
QQ :532337155
电话：028-86922220
给你看一段超炫的CSS3代码：是关于checkbox的。
创新互联建站从2013年创立，先为栖霞等服务建站，栖霞等地企业，进行企业商务咨询服务。为栖霞企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
style
*{
margin:0;
padding:0;
}
body{
background-color:#202838;
}
.switch{
width:180px;
height:55px;
position:relative;
margin:100px auto;
}
.switch input{
filter: alpha(opacity=0);
opacity: 0;
z-index: 100;
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.switch label{
display:block;
width:80%;
height:100%;
position: relative;
background: linear-gradient(#121823, #161d2b);
border-radius: 30px 30px 30px 30px;
box-shadow:
inset 0 3px 8px 1px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.2);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.switch label i{
display:block;
width:51px;
height:51px;
position:absolute;
left:2px;
top:2px;
z-index:2;
border-radius:50%;
background: linear-gradient(#36455b, #283446);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 12px 12px rgba(0,0,0,0.4);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.switch span {
content: "";
display: inline-block;
position: absolute;
right: 0px;
top: 17px;
width: 18px;
height: 18px;
border-radius: 10px;
background: gradient-gradient(#36455b, #283446);
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(185,231,253,0),
inset 0 0 8px rgba(0,0,0,0.9),
inset 0 -2px 5px rgba(0,0,0,0.3),
inset 0 -5px 5px rgba(0,0,0,0.5);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
}
.switch input:checked ~ span{
content: "";
display: inline-block;
position: absolute;
width: 18px;
height: 18px;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
background: #b9f3fe;
background: gradient-gradient(#ffffff, #77a1b9);
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(100,231,253,1),
inset 0 0 8px rgba( 61,157,247,0.8),
inset 0 -2px 5px rgba(185,231,253,0.3),
inset 0 -3px 8px rgba(185,231,253,0.5);
}
.switch input:checked ~ label i {
left: 63%;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 8px 8px rgba(0,0,0,0.3),
inset -1px 0 1px #b9f3fe;
-webkit-transition: all .5s ease;
transition: all .5s ease;
}
/style
body
div class="switch"
input type="checkbox" name="toggle"
label for="toggle"i/i/label
span/span
/div
/body
div class="box1"/div
style type="text/css"
body{margin:0;padding:0}
.box1{height:300px;width:300px;background:#3695d5;}
.box1{/*过渡效果*/
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
.box1:hover{background:#dcdcdc;height:400px;width:400px}/*使用伪类hover，鼠标悬浮选取元素，改变样式*/
/style
可以，后面的是标准写法，不写type="text/css"也可以浏览器同样能识别，默认就是type="text/css"，同js的script type="text/javascript"/script
这个看你用的什么编辑器了，有的是ctrl+shift+r,有的是ctrl+f里面有直接就有替换成的文本写你要替换的就行了
XSL提供两种机制来联合样式表:
1.样式表导入，允许样式表之间相互引用
2.样式表包含，允许样式表被原文组合.
样式表导入
一个XSL样式表可以包含xsl:import元素.所有xsl:import元素必须出现在样式表的开头. xsl:import元素有一个 href 属性，它的值就表示要导入的样式表的URI. 相对URI是指相对于xsl:import元素的基URI.
xsl:stylesheet xmlns:xsl=""
xsl:import href="article.xsl"/
xsl:import href="bigfont.xsl"/
xsl:define-attribute-set name="note-style"
xsl:attribute-set font-posture="italic"/
/xsl:define-attribute-set
/xsl:stylesheet
导向的样式表中的规则和定义比任何被导入样式表中的规则和定义都要重要.同样，一被导入的样式表中的规则和定义比之前导入的样式表中的规则和定义都要重要.一般来说,更重要的规则或定义比次重要的规则或定义要优先.每一类的规则和定义都会详细规定它.
样式表包含
一个样式表中可以用xsl:include元素来包含另一个XSL样式表. xsl:include也有href 属性，它的值就表示被包含的样式表的URI. 相对URI是指相对于xsl:include元素的基URI. xsl:include元素可以作为xsl:stylesheet元素的子元素，出现在任何xsl:import之后.在XML树的层次在上该包含生效.由href属性值定位的资源内容作为一个XML文档解析,在该文档中的xsl:stylesheet元素的子元素替代包含文档的xsl:include元素.同时在被包含的文档的xsl:import元素在包含文档中移上至任一存在的xsl:import元素之后. 不象xsl:import,被包含的规则或定义不影响他们被处理的方式.
嵌入样式表
通常一个样式表就是一个完整的XML文档，xsl:stylesheet元素作为文档的元素. 然而一个XSL样式表也可以嵌入在其它文档内容之中.内嵌的方式可能有两种：XSL样式表可以原文嵌入在一个非XML文档中或者xsl:stylesheet不作为文档元素出现在一个XML文档中.在第二种情况增加了出现内嵌样式，即自己规定样式的文档的可能. XSL还没有为之定义相应的机制.这是由于可以采用把样式表结合文档的通用方式来实现，只要满足:
1. 该方式允许一部分内容可以规定为样式表,例如使用有片段标识符URI
2. 该方式本身能被嵌入在文档中, 比如作为一个处理指令.定义这样的方式不在XSL的范围之内.
下例表明了怎样用xml:stylesheet处理指令将样式表和文档结合来实现内嵌样式. 其中的URI在片段标识符中使用了一个Xpointer来确定xsl:stylesheet元素的位置.
?xml version="1.0"?
?xml:stylesheet type="text/xsl" href="#id(style1)"?
!DOCTYPE doc SYSTEM "doc.dtd"
doc
head
xsl:stylesheet xmlns:xsl="" id="style1"
xsl:import href="doc.xsl"/
xsl:template match="id(foo)"
fo:block font-weight="bold"xsl:process-children//fo:block
/xsl:template
/xsl:stylesheet
/head
body
para id="foo"
...
/para
/body
/doc
系统原来的更换CSS模板是要重新刷新一下儿页面的，我一直都对这个功能很不满意，百分之九十五的功能都用AJAX无刷新的实现了，难道要在这个小小的更换页面CSS模板上给用户添点恶心吗？于是，昨天晚上好好考虑了这个功能上的实现，原来发现其实并不难，小改一下就OK了，现在系统上的模板更换是不用刷新页面来完成的，明显在感觉上比原来好得多了，下面谈谈经验吧：
对于一个多页面的网站来说了，CSS的更换不能只简单的在一个页面中调用更换CSS功能更新这个页面头上链接的CSS地址，因为它不能保证在点击了别的页面后新的样式应该到新打开的页面中去，因此，一定要有一个全局性的变量来记录它，我选用的是SESSION，在用户点击了侧边模板下拉框中的模板时，触发了下拉框的ONCHANGE事件，执行了一段AJAX程序，程序的功能是将用户选中的模板信息发送给服务器，服务器接收新的模板信息后更新表示模板的SESSION值，然后向客户端返回成功信息，客户端则根据返回的成功信息来改变页面样式，注意：我在页面头中写的CSS链接信息是这样子的:
程序代码
LINK
id=cssLink
href="css.aspx"
type=text/css
rel=stylesheet
css.aspx是一个ASP.net的页面，它的作用只是单一的根据SESSION中的当前CSS模板信息来转向所应CSS样式表文件！这样子的处是客户端在接收到了服务器端成功更新SESSION的信息后刚不用考虑其它的东西，直接一句：
document.getElementById("cssLink").href=document.getElementById("cssLink").href;
将cssLink的href重新写一下儿，虽然是前后一模一样子的值，但这会激发CSS.ASPX页面重新读一下儿，这样子CSS.ASPX页面就能转到新更新的CSS样式表了！由于网站别的页面的样式表链接信息都是这样写的，所以每个页面加载时都是会应用最新更新的样式表的，这样子，网站无刷新的全局更新样式表就实现了！！
希望我的回答可以帮到您哦