html中利用边框圆角制成的圆怎么可以把文字控制在圆内
.radius{
width:500px;height:500px;
border:4px solid #ccccff;
border-radius:50%;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字控制在圆内文字控制在圆内文字控制在圆内文字控制在圆内</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 300px;
height: 300px;
border: 4px solid #ccccff;
border-radius: 50%;
}
.radius{
top: 50%;
position: absolute;
width: calc(300px - 1px);
text-align: center;
}
</style>
</head>
<body>
<div class="content"><span class="radius">文字控制在圆内文字控制在圆内文字控制在圆内文字控制在圆内</span></div>
</body>
</html>
这个设置padding-top即可，如padding-top: 某个像素值
.radius{
width:500px;
height:400px;
padding-top:100px;
border:4px solid #ccccff;
border-radius:50%;
text-align:center;
}