我正在嘗試邊框半徑形狀,但圓形形狀與其他形狀不在同一條線上,這正常嗎? 我怎樣才能把它放在同一條線上?
Codepen: https://codepen.io/Kamy7/pen/GREQWrW
編輯:這是我忘了的HTML。 我必須打更多的字來保存它,lol
。<! DOCTYPE html>
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
</head>
<body>
<div>
<p class="rounded-edges"/span>> 圓形邊緣</p>。
<p class="circle-shape"/span>> 圓型</p>
<p class="top-bottom"/span>> 圓頂、圓底</p>
<p class="bottom-top"/span>> 圓形底部,頂部</p>/span>
</div>/span>
</body>
</html>
body {
font-family: Arial;
font-weight: bold;
color: #F2EA01;
}
.圓弧形的邊緣 {
寬度:100px。
高度:100px。
背景:黑色。
padding: 20px。
border-radius: 25px;
text-align: center;
顯示: inline-block;
}
.circle-shape {
寬度:100px。
高度:100px。
背景:黑色。
padding: 20px。
border-radius: 50%;
text-align: center;
顯示: inline-block;
}
.top-bottom {
寬度:100px。
高度:100px。
背景:黑色。
padding: 20px。
border-radius: 25px 0px 25px;
文字對齊:居中。
顯示: inline-block;
}
.底部-頂部 {
寬度:100px。
高度:100px。
背景:黑色。
padding: 20px。
border-radius: 0px 25px 0px;
text-align: center;
顯示: inline-block;
}
uj5u.com熱心網友回復:
只需在包含所有形狀的div中添加display: flex;。
uj5u.com熱心網友回復:
檢查這個 :
只需在圓圈中改變你的文本
之前:在圓圈中改變文本
之前。圓圈的形狀
之后。圓圓的圓形
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/331805.html
標籤:
