css圆角兼容代码（CSS圆角）

今天给各位分享css圆角兼容代码的知识，其中也会对CSS圆角进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、css实现圆角的几种方法是什么？
• 2、如何用CSS代码设定按钮的圆角样式？
• 3、IE浏览器css圆角兼容问题
• 4、css圆角的写法！
• 5、怎样用css写出圆形边框
• 6、css圆角代码

css实现圆角的几种方法是什么？

有四种方法可以实现圆角。

第一、直接写CSS代码：border-radius

第二、四个圆角贴图；制作四个圆角的图片，然后用css定义

第三、直接制作整个圆角矩形背景

第四、定义12个背景色：左上角4个，右上角4个，右下角4个，左下角4个。

如何用CSS代码设定按钮的圆角样式？

用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px;它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：

div id="round"/div

#round {

   padding:10px; width:300px; height:50px;

   border: 5px solid #dedede;

   -moz-border-radius: 15px;      /* Gecko browsers */

   -webkit-border-radius: 15px;   /* Webkit browsers */

   border-radius:15px;            /* W3C syntax */

}

效果如图：

IE浏览器css圆角兼容问题

1、使用border-radius。ie下需要在css中写behavior: url(ie-css3.htc);具体代码自己搜索一下，肯定能搜到的。

2、使用圆角图片做背景。缺点是需要多一些DIV和css，但是兼容性更好。

css圆角的写法！

方法一：CSS3 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " " html xmlns=" " head meta http-equiv="Content-Type" content="text/html; charset=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" / titleBorder-radius/title /head body div style="border-width: 1px;border-style: solid;-moz-border-radius: 11px;-khtml-border-radius: 11px;-webkit-border-radius: 11px;border-radius: 11px;padding:5px;"在Firefox和Safari 3的浏览器里能看到圆角效果/div /body /html 方法二：CSS2 先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置

怎样用css写出圆形边框

1、首先打开sublime text编辑器，新建一个html文件，里面写入一个p标签：

2、然后设置p标签的样式，这里先设置一个边框，然后设置圆角边框，主要使用CSS3属性border-radius属性定义圆角效果。其中的数值为参数length是浮点数和单位标识符组成的长度值，不可为负值，这里圆角的值越大，圆角的弧度也越大：

3、最后打开浏览器，就可以看到圆角边框了：

css圆角代码

css3最简单：

border-radius:10px;---4个角都是10px的圆角。

你也可以：border-radius:2px 3px 4px 5px;分别对应容器的右上、右下、左下、坐上。

如果是css2的话，需要用到图片来实现圆角。

关于css圆角兼容代码和CSS圆角的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。