css圆角的写法！

html-css023

css圆角的写法！,第1张

方法一：CSS3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns=" http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="robots" content="all" /><meta name="author" content="Tencent-ISRD" /><meta name="Copyright" content="Tencent" /><title>Border-radius</title></head><body><div style="border-width: 1pxborder-style: solid-moz-border-radius: 11px-khtml-border-radius: 11px-webkit-border-radius: 11pxborder-radius: 11pxpadding:5px">在Firefox和Safari 3的浏览器里能看到圆角效果</div></body></html>方法二：CSS2 先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置

如果浏览器支持的话, 直接一个 radius 样式就可以了；

border-radius:4px

-webkit-border-radius: 4px；

新建一个html文件，在html内写新建一个button标签：

<input type="button" name="button" value="设置圆角" class="btn">；同时给button先加上样式：

btn{width: 200pxheight: 30pxbackground: #cccborder: 1px solid #eee}；

预览html文件，可以看到现在button按钮暂时还没有圆角；

css样式设置圆角有专门的样式（border-radius），因此button按钮设置圆角可以加上：border-radius: 15px

特别注意，border-radius样式目前只有高版本的浏览器才支持，例如谷歌浏览器，火狐，ie9+等浏览器；

如果你想兼容所有的浏览器，就可以考虑用背景图的形式设置，首先切出一张圆角按钮图片，然后用background样式设置背景图，而且设置合适的宽高，并去掉默认的边框；

再次预览html，button按钮圆角设置成功了，可以查看所有浏览器，均能正常显示。

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