css如何设置圆角


当前第2页 返回上一页

1

2

3

4

5

6

7

8

9

10

11

12

.box2{

width:200px;

height:300px;

margin: 30px auto;

border: 2px solid #e4007e;

text-align: center;

line-height: 200px;

font-weight: bold;

font-size: 24px;

background: burlywood;

border-radius: 100px/150px;

}

效果如图:

t01180712640c6d58eb.webp.jpg

方法4:

设置不同弧度的圆角

例子:

css部分:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

#box4{

width:500px;

position: relative;

margin:30px auto;

}

.div4,.div5,.div6,.div7{

width:200px;

height:200px;

text-align: center;

color:seagreen;

font-size: 26px;

line-height: 200px;

background: yellowgreen;

border:2px solid darkslategray;

float:left;

margin:20px;

}

.div4{border-top-left-radius: 40px;}

.div5{border-top-right-radius: 20px;}

.div6{border-bottom-left-radius: 30px;}

.div7{border-bottom-right-radius: 10px;}

效果如图:

t01063fc687197f7a4f.webp.jpg

注意事项

百分比大于50%后,形状就不会再变化了,圆角的半径不能超过宽/高的一半。

【推荐学习:css视频教程】

以上就是css如何设置圆角的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

css如何设置段落缩进

html css怎么设置字体大小

css怎么设置变成小手

css实现自适应宽度的菜单(代码实例)

css全称

css怎么设置文字加粗

css如何设置li的样式

css中字体加粗要怎么做?

css实现卡片式图片效果

css外部样式表怎么写

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...