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

html-css027

css实现圆角的几种方法是什么？,第1张

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

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

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

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

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

在HTML中把块的边框做成圆角需要利用css的border-radius属性。

操作步骤：

1、打开Adobe Dreamweaver CC 2015。

2、执行菜单栏中的"文件的新建"命令或按住Ctrl+N键打开"新建文档"对话框，选择其文档类型为HTML，单击"创建"按钮，即创建一个网页文档。

3、在<body>和</body>之间添加"<form></form>"，如下图所示。表单使用的<form>标记是成对出现的，在首标记<form>和尾标记</form>之间的部分就是一个表单。

4、在<form>和</form>之间添加"<input name="text" type="submit" value="登录" class="input_box">"，如下图所示。

5、在<head>和</head>之间添加"<style type="text/css"></style>"，如下图所示。

6、在<style type="text/css">和</style>之间添加".input_box{width:360pxheight:40pxborder-radius:20pxborder-style:nonebackground:#ec6941font-size:14pxcolor:rgba(249,248,248,1.00)}"，如下图所示。

7、保存网页文件，按住F12键可以在浏览器中预览效果，如下图所示。

语法说明

输入<input>是个单标记，必须嵌套在表单标记中使用，用于定义一个用户的输入项。

name属性：输入字段的识别名称，传递数据时的参数名称。

type属性：输入字段的类型。button是表单通用按钮。

value属性：表单字段预设数据值。例如用于button、submit、reset等字段类型指的是按钮标签的显示文字。

class属性：对应于网页中的CSS选择器名称。

不用图片，只用css制作圆角的另一方法。html代码：<divclass="curvedBox"><span><spanclass="r1" ></span><spanclass="r2" ></span><spanclass="r3" ></span><spanclass="r4" ></span></span><divclass="content">Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems. </div><span><spanclass="r4" ></span><spanclass="r3" ></span><spanclass="r2" ></span><spanclass="r1" ></span></span></div>css代码： ody{background-color:#000}.curvedBox{width:300pxmargin: 2510px auto 0}.curvedBox .r1,.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{background-color:#fffdisplay:blockoverflow:hiddenheight:1pxfont-size:1px}.curvedBox .r2,.curvedBox .r3,.curvedBox .r4{border-width:0 1pxborder-left:1px solid #fffborder-right:1px solid #fff}.curvedBox .r1{margin:0 6px}.curvedBox .r2{margin:0 3px}.curvedBox .r3{margin:0 2px}.curvedBox .r4{margin:0 1pxheight:2px}.curvedBox .content{background:#fffborder-left:1px solid #fffborder-right:1px solid #fffpadding:0 5px}这个方法其实并不完美，其实只是利用了”无限接近”的一个概念。看放大后的图的话，可以很清楚地看到锯齿状。锯齿其实把图片放大足够地倍数地话，也能看到锯齿，不过放大地倍数得相当大了。将 r1 r2 r3 r4 层叠起来，利用它们 margin（left/right） 的改变以及 border(left/right)，来实现这个近似的效果。理论上，如果 rn 足够多的话，效果就会无限趋近圆弧。不过话又说回来了，多加这么多的标签和css的话，在效率上必然会存在问题，也说不上就比用图片好到哪里去。所以说，这只是提供一个思路，到底怎么用，用在哪里，还得因地制宜。