创建内部带有文本的边框

Question

我想创建一个边框，其中的文本如附件中所示。我尝试了其他解决方案，但无法获得在移动版本上也可以使用的解决方案。

有人有主意吗？

示例

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="70"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="5" />


Animation animation = AnimationUtils.loadAnimation(this, R.anim.shake);    
itemView.startAnimation(animation);

div {
  height: 50px;
  width: 600px;
  border: 2px solid black;
  border-radius: 35px;
}
    
h1 {
  text-align: center;
  padding: 0 10px;
  width: 200px; /* Might to adjust this based on screen, using css media query */
  margin-top: 30px; /* Might need to play around with this value based on text size */
  margin-left: auto;
  margin-right: auto;
  background: white;
}

以Text in Border CSS HTML为基础，唯一的问题是必须设置背景颜色以遮挡边框，在您的情况下这可能不重要。

Answer 2

我确实这样：

#comments h2 {
    margin-bottom: 0px;
    width: 147px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    background-color: #fff;
    margin-top: 45px;
}
#comments {
    border: 2px solid #000;
    margin: 30px;
    width: 50%;
    padding: 0 25px;
    height:60px;
    border-radius:30px;
}

<div id="comments" class="comments-area">
<h2>Comments</h2>
</div>