【代码教程】传说中的纯CSS圆角代码html代码
2013-08-20 13:15:57 -0400
[代码教程]传说中的纯CSS圆角代码html代码
传说中的纯CSS圆角代码html代码
返回主站
网警服务
✎请勿抄袭本页面,可以复制框内代码
代码说明如下
代码名：传说中的纯CSS圆角代码html代码
类型：html
来自：互联网
代码说明：您可以复制以下框内的代码粘贴到您须要的地方!传说中的Google CSS圆角？不过效果不是很明显，CSS圆角的核心思路要点已经写出来了，剩下的你自己动手改造吧，1像素的圆角是不使用图片的圆角中最好实现的，如果大于1像素的圆角，个人觉得使用图片一修饰最省事了。将下方框内代码加入你的网站须要这种功能的地方!
html代码如下框内
<!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/html; charset=utf-8" /> <title>圆角按钮</title> <style type="text/css"> <!-- a{color:#000;text-decoration:none;}a:hover{color:red;} .a{float:left;border-top:1px solid #d6d6d6;border-bottom:1px solid #d6d6d6;font-size:12px;} .b{float:left;border-left:1px solid #d6d6d6;border-right:1px solid #c2c2c2;border-bottom:1px solid #c2c2c2;margin:0 -1px;position:relative;} .c{float:left;border-left:2px solid #fff;border-top:1px solid #fff;border-bottom:2px solid #f0f0f0;line-height:16px;padding:0 5px;background:#f4f4f4;} --> </style> </head> <body> <a href="http://aibeyond.wodemo.com" class="a"> <b class="b"> <b class="c">圆角按钮</b> </b> </a> </body> </html>
代码效果演示
圆角按钮
圆角按钮