高手~~~这个用css怎么写呢？？？

html-css07

高手~~~这个用css怎么写呢？？？,第1张

除了用图片之外还有一个办法，就是用css3实现类似的效果。不过css3在ie下支持不好。必须使用支持css3的浏览器才可以，比如谷歌，火狐浏览器等等。一下是代码 供参考：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>源码小筑-CSS3复选框和单选按钮美化</title>

<style type="text/css">

#holder {

width: 100%

}

.regular-checkbox {

display: none

}

.regular-checkbox + label {

background-color: #fafafa

border: 1px solid #cacece

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)

padding: 9px

border-radius: 3px

display: inline-block

position: relative

}

.regular-checkbox:checked + label {

background-color: #e9ecee

border: 1px solid #adb8c0

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1)

color: #99a1a7

}

.regular-checkbox:checked + label:after {

content: '\2714'

font-size: 14px

position: absolute

top: -15px

left: 3px

color: red

}

.big-checkbox + label {

padding: 18px

}

.big-checkbox:checked + label:after {

font-size: 50px

left: 15px

}

</style>

</head>

<body>

<div id="holder">

<center>

<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>

</center>

</div>

</body>

</html>

顺便打个广告，推荐一个特效网站 源码小筑-http://www.codevillas.com，呵呵

在工具菜单下选择选项，在常规里去掉插入“自选图形”时自动创建绘图画布前的对勾，再次使用插入文本框和图形时就不会出现四个角了。如果你所指的去掉边框是指文本框的边框的话，那你就在设置文本框格式菜单下将边框的线条设置成白色即可。