css怎么让DIV的边框的4个角呈圆角
在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
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单元外，还可以利用百分比来设置圆角。
- 发表于 2020-01-11 17:00
- 阅读 ( 2183 )
- 分类：其他类型
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章