css3开关按钮样式,css实现开关按钮

css3中的button样式怎么改

在一个id为bt1的按钮上设置样式，如下：

#bt1{

font-family:微软雅黑 ;    !-- 字体  --

width: 60px ;             !-- 宽度  --

height:30px ;             !-- 高度 --

font-size:14px;           !-- 字体大小--

color:gray;               !--字体颜色  --

border: 1px solid red； !-- 边框；边框宽度、单线、边框颜色 --

margin-left: 10px;            !-- 左边距，相应的还有右边距margin-right,                                      上margin-top,下 margin-buttom --

background-color:#F1F1F1;        !--背景色；十六位颜色表示时前加#符号  

                                  transparent是透明--

box-shadow:10px 10px 10px gray;  !-- 阴影；x轴偏移（右偏为正），y轴偏移（向下                                为正），模糊度，模糊颜色  --

border-radius:10px 10px 10px 10px;!-- 圆角；左上，右上，右下，左下--

cursor:pointer;                  !-- 鼠标经过时鼠标变成小手  --

}

相关问答

Q1: CSS3 的按钮怎么快速实现样式

HTML结构该鼠标点击按钮特效中每一个可点击的元素都是一个按钮CSS样式以下是该css3点击按钮特效的通用CSS样式：插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：上面的CSS代码可以生成如下图的动画效果：在“Stana”效果中，使用了html5SVGclipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。在“Stoja”效果中使用了CSSclip-path属性，这个效果也需要浏览器的支持才能看得到的。

Q2: 怎样用CSS写按钮样式

一般有三种方法：

Button标签直接使用CSS定义样式，优点是立体感、有按下状态，缺点是样式单一、各浏览器下显示效果不一致。

a标签+背景图片+滑动门技术，优点是可实现多种视觉效果，缺点是采用滑动门技术会导致背景图片过大。

a标签直接使用CSS3绘制，优点是在保证视觉效果的基础上大大减少了背景图片的使用，缺点是部分浏览器不兼容。