css怎么让DIV的边框的4个角呈圆角 _html+css

在css中，可以使用border-radius属性来设置div的边框为圆角，值越大，角越圆。下面小编举例讲解css怎么让DIV的边框的4个角呈圆角。

需要这些哦
html+css
代码编纂器：Dreamweaver CS5
方式/
1新建一个html文件，定名为test.html ，用于讲解css怎么让DIV的边框的4个角呈圆角。

2在test.html文件内，利用div标签建立一个模块，并设置其class为mydiv ，本家儿要用于下面经由过程该class设置div的样式。

3在test.html文件内，建立<style type="text/css"></style>标签，用于编写div的css样式。

4在css标签内，设置类名mydiv的样式， div的样式将在“{}”花括号内编写。

5在css标签内，利用width属性设置div的宽度为200px ，利用height属性设置div的高度为200px ，同时利用border属性设置div的边框为1px的灰色边框。

6在css标签内，再经由过程border-radius属性来设置div的圆角值，例如，这里设置为20px ，圆角值越大， div边框角的弧度越大。

7在浏览器打开test.html文件，查看实现的结果。

总结：1【css怎么让DIV的边框的4个角呈圆角】1、建立一个test.html文件。
2、利用div标签建立一个模块，并设置其class为mydiv 。
3、在css标签内，经由过程类名设置div的样式，利用width属性设置div的宽度为200px ，利用height属性设置div的高度为200px ，同时利用border属性设置div的边框为1px的灰色边框。
4、在css标签内，经由过程border-radius属性来设置div的圆角值，例如，这里设置为20px ，圆角值越大， div边框角的弧度越大。

注重事项border-radius属性除了可以利用px单元外，还可以利用百分比来设置圆角。

以上内容就是css怎么让DIV的边框的4个角呈圆角的内容啦，希望对你有所帮助哦！

css怎么让DIV的边框的4个角呈圆角

猜你喜欢