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如何设置超出部分滚动条隐藏

a标签怎么去掉下划线

css如何让盒子浮动

css animation-duration属性怎么用

怎样在css中解决长英文单词的页面显示问题?

css3二级导航菜单制作步骤详解

css 怎么可以不继承样式

none在css中表示什么意思

为什么使用div+css布局?

html与css中2d转换模块

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




打赏

取消

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

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

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

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

评论

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