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。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置

根据你所要求的，我只有两种办法： 第一种： border-width:1pxborder-style:solid-moz-border-radius:11px-khtml-border-radius:11px-webkit-border-radius:11pxborder-radius:11pxpadding:5px以上的css属性控制一个div就有圆角框了，但部分浏览器不支持。 第二种： 将背景直接用一个圆角图片替换，此方法最简单

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

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

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