HTML+CSS3设置圆角边框、圆形
电脑网页编纂器
CSS3属性：border-radius方式/步调
- 1
打开本身的网页编纂器新建HTML文件模板
- 2
编写第一种常用的圆角样式：同时设置四个角为圆角
HTML代码：<div class="demo1"></div>
CSS代码：width: 200px; height: 50px; background-color: crimson; border-radius: 15px;
- 3
编写第二种常用的圆角样式：设置肆意角为圆角
HTML代码：<div class="demo2"></div>
CSS代码：width: 200px; height: 50px; background-color: crimson; border-radius: 20px 50px 20px 50px;
- 4
编写第三种常用的圆角样式：圆形
HTML代码：<div class="demo2"></div>
CSS代码：width: 200px; height: 200px; background-color: crimson;
border-radius: 50%;
- 5
编写第四种常用的圆角样式：椭圆
HTML代码：<div class="demo4"></div>
CSS代码：width: 200px; height: 150px; background-color: crimson;
border-radius: 50px/75px;
- 6
编写第四种常用的圆角样式：零丁设置某一个角
HTML代码：<div class="demo5"></div>
CSS代码：width: 200px; height: 150px; background-color: crimson;
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 50px;
- 发表于 2019-08-07 00:17
- 阅读 ( 889 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章