1.我们以谷歌浏览器为例，来讲讲怎么调试CSS。先打开谷歌浏览器，看截图里的红色箭头，点击“工具”，点击“开发者工具”，就打开调试工具了，也可以按下快捷键F12来打开调试工具；
2.打开的调试工具如下图所示：
3.我们就以百度的首页为例，看看调试效果。看截图，点击那个“抓取元素”的按钮，来获取要审查的元素；
4.看截图，出现下面的界面后，点击“style”，单击那个对勾，就可以看到效果了；
5.我去掉一些样式之后，就出现了下面的效果，看截图；
除了用图片之外还有一个办法，就是用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，呵呵
新版本通用：（1）
C:\Users\admin\Application Data\Adobe\Dreamweaver CC 2018\cloudpref\Adobe Dreamweaver CC 2018\AdobeDreamweaverSettingsPrefs.xml.tmp
<pref name="CSS Props On New Line" type="string" val="TRUE"/>
改为：
<pref name="CSS Props On New Line" type="string" val="FALSE"/>
（2）
同时更改注册表中 即快捷键 WIN+R 输入 regedit 回车 打开注册表
/HKEY_USERS/S-1-5-21-2974007363-4150737019-3812494026-1000/SOFTWARE/Adobe/Dreamweaver CC 2018/Source Format中
将CSS Props On New Line 值改为 FALSE
重启DW就解决了。
重启Dreamweaver后不需要再设置了，使用 “应用源格式“ 功能即可看到效果
