Question

如果有任何方法可以使一个框看起来像带有HTML / CSS的here：

Answer 1

您可能正在寻找适用于表单的HTML fieldset和legend元素。

来自MDN：

<fieldset>

HTML <fieldset>元素用于将多个控件组合为   以及网络表单中的标签（<label>）。

<label>

HTML标签元素（<label>）表示项目的标题   用户界面。

如前所述，创建表单时会使用fieldset和legend元素。

如果您只想在边框上放置标签框，可以使用绝对定位，如下所示：

<强> HTML

<div id="container">
    <div id="label">I'm a Box</div>
</div>

<强> CSS

#container {
    height: 100px;
    width: 300px;
    border: 1px solid black;
    position: relative;
}

#label {
    position: absolute;
    top: -10px;
    left: 20px;
    height: 20px;
    width: 100px;
    background-color: pink;
    border: 2px solid red;
    text-align: center;
}

以上代码呈现：

DEMO

Answer 2

你可以使用“绝对位置”，如下所示：

int get_current_step() {
    // I'm not sure whether your logic actually works that way…
    return (glfwGetTime() - capture_counter_m) / WAIT_TIME_BETWEEN_PHOTOS;
}

void handle_face(face_t * face) {
    helper::gl::display_cv_mat(video_frame);  // display face
    face_out_of_range_msg_flag_m = false;
    if (!photo_capture_flag_m) {
        // start capturing
        photo_capture_flag_m = true;
        capture_counter_m = glfwGetTime() + 5 + WAIT_TIME_BETWEEN_PHOTOS;
    } else if (before_wait_time(photos_wait_time4)) {
        draw_frames_flag_m = true;
        render_text_top_left("Face detected; look at the camera and stand still.");
    } else if (before_wait_time(photos_wait_time1)) {
        const auto step = get_step();
        render_text_center(std::to_string(step).c_str());
    } else if (before_wait_time(photos_wait_time_almost_done)) {
        render_text_center("done");
        draw_frames_flag_m = false;
        // Don't draw frames the next few times so that the photo can be taken
    } else if (before_wait_time(photos_wait_time_done)) {
        render_text_center("done");
        load_and_save_portait(video_frame, *face);
    } else if (before_wait_time(capture_counter_m)) {
        render_text_center_right("processing photo...");
    } else {  // reset
        photo_capture_flag_m = false;
        capture_done_flag_m = false;
    }
}

.a {
  margin-top: 50px;
  height: 100px;
  width: 100%;
  border: 2px solid red;
}

.b {
  position: absolute;
  top: 40px;
  left: 20px;
  border: 2px solid red;
  height: 20px;
  width: 20%;
  background-color: white;
}

Answer 3

在其中使用fieldset标记和legend。样品：

<fieldset>
    <legend>I'm A Box</legend>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</fieldset>

Answer 4

您可以尝试这样的事情：

#box {
  margin: 20px 10px;
  padding: 5px 10px;
  height: 100px;
  border: 2px solid red;
  border-radius: 5px;
  position: relative;
}
#box-caption {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  background-color: white;
  padding: 3px;
  border: 2px solid red;
}

<div id="box">
  <div id="box-caption">Box caption</div>
</div>

如何在HTML的边框上创建一个标题框？

4 个答案: