字段集中 HTML5 图例的 CSS3

2024-03-26

您能否建议 CSS 获得如下引用的效果(使用 CSS3 渐变和边框)?

当前 HTML 版本如下:

<section style="margin: 10px;">
<fieldset style="border-radius: 5px; padding: 5px; min-height:150px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

fieldset {
    font-family: sans-serif;
    border: 5px solid #1F497D;
    background: #ddd;
    border-radius: 5px;
    padding: 15px;
}

fieldset legend {
    background: #1F497D;
    color: #fff;
    padding: 5px 10px ;
    font-size: 32px;
    border-radius: 5px;
    box-shadow: 0 0 0 5px #ddd;
    margin-left: 20px;
}
<section style="margin: 10px;">
<fieldset style="min-height:100px;">
<legend><b> My Statistics </b> </legend>
<label> <br/> </label>
<label> <br/> </label>
</fieldset>

(http://jsfiddle.net/ESkRt/1/ http://jsfiddle.net/ESkRt/1/)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

字段集中 HTML5 图例的 CSS3 的相关文章

  • CSS 中的圆帽下划线

    你能用 CSS 制作圆形下划线 如上图所示 吗 如何 有没有办法做到这一点border bottom border radius相反 会产生这种时尚的效果 编辑 我误解了皮克想要什么 但这应该有效 test font size 50px b
  • 使用选择器获取最接近的父元素(不包括当前元素)

    我正在尝试获取元素的最接近的父元素 看着 closest https developer mozilla org en US docs Web API Element closest 如果选择器与元素匹配 它似乎会返回元素本身 Closes
  • CSS淡入淡出动画延迟计时

    我正在尝试使用 css3 创建幻灯片效果 我有三张图像 我需要将它们相互淡入淡出 每次转换需要持续 3 秒 第一张图像显示 3 秒 然后淡入第二张图像 第三张图像同样显示 我不确定如何计算关键帧的百分比 Codepen http codep
  • 标记对话(或采访)的最语义方式?

    我试图找出最语义化的方式来标记这样的东西 John blah blah Paul blah blah George blah blah Ringo blah blah or John blah blah Paul blah blah Geo
  • 如何导出从 HTML DOM 解析器检索到的所有图像?

    我想要 使用从我的网站获取所有图像PHP 简单 HTML DOM 解析器 http simplehtmldom sourceforge net 并将它们全部导出到我的桌面ALL立刻 Not右键单击保存或屏幕截图 OPTIONAL 保存所有h
  • 无法将 event.target 转换为字符串

    为了识别用户单击的元素 我尝试使用事件对象target document click function e var str e target toString console log str if str indexOf some clas
  • Objective-C / Cocoa Touch 中的 HTML 字符解码

    首先 我发现了这个 https stackoverflow com questions 659602 objective c html escape unescapeObjective C HTML 转义 unescape https st
  • CSS 100% 高度在 React 应用程序中不起作用

    我试图在我的 React 应用程序中使用 Flexbox 创建一个简单的两列网页 占据整个宽度和高度 我可以让它单独使用 HTML 和 CSS 但不能在 React 应用程序中使用 到目前为止我有 root overflow x hidde
  • VideoJs 在 Firefox 中的 Flash 回退问题

    我尝试将 videoJs 添加到我的网站来播放 MP4 文件 所有这些在 Chrome 中都能完美运行 但当我转到 Firefox 不支持 MP4 文件 时 Flash 播放器停留在黑屏上 按钮不执行任何操作 简单的问题 为什么 我不明白
  • height: calc(100%) 在 CSS 中无法正常工作

    我有一个 div 我想填充主体的整个高度减去设定的像素数 但我无法得到height calc 100 50px 上班 我想这样做的原因是我有一些元素具有基于一些不同标准的动态高度 例如标题的高度根据它可以包含的不同元素而变化 然后 内容 d
  • 如何在 div 标签上添加带边框的三角形

    我有一个 div 标签 我想在它上面添加一个小三角形 注意 我希望我的 div 标签具有某种颜色的边框 以及另一种颜色的 div 主体 假设我的 div 背景为白色 边框为蓝色 请看这个 http fiddle jshell net pau
  • 有没有办法离线将多个 Plotly HTML 文件合并/嵌入到一个页面/HTML 文件中?

    我正在尝试将多个图表合并成一个 HTML 报告来发送 问题是我真的不认为子图是最好的主意 因为图表相对不相关 不同的 X Y 轴 我所需要做的只是将图表附加到 1 个 HTML 文件中 有一个指南解释了如何使用绘图 URL 来完成此操作 但
  • CSS3 过渡缩放但不平移

    我在任何地方都找不到这个问题的答案 可能是因为它不存在 但无论如何 是否可以独立定义平移和缩放的转换 而不是定义 transition property transform 现在我得到了以下定义 logo position absolute
  • 绝对位置在固定位置内不起作用

    div div div div Both main and inner集装箱取走position fixed 内胆的制作方法position absolute和主容器position fixed 你需要定义top right bottom
  • 使用 javascript 获取选择标签的名称

    我在任何地方都没有找到这个问题 所以我将其发布在这里 我有一堆选择标签 部分使用 VBScript 命名 我希望能够获取从 javascript 中的 onchange 事件调用的选择标签的名称 这是代码
  • jquery $('id').text 带粗体

    我有一个 jquery 可以更改链接的文本 如下所示 if urlfind gt 0 linkurl text More info 和 HTML a href a 我试图为此链接添加粗体 但添加 b More Info b 让它们在文本本身
  • 针对较小屏幕的拆分表行

    我有一个固定宽度为 960px 有 5 列的表格 当我在移动设备中查看时 我想制作第 3 4 5 列 看起来就像在下一行 有什么方法可以让 CSS 打断一行 使其看起来像这样 但是 还保留原来的HTML代码吗 您可以使用 FlexBox f
  • Html页面在底部加载

    我需要一个 HTML 页面在页面加载时自动向下滚动 所以基本上加载在底部 可以使用JavaScipt吗 请您帮助我或引导我走向正确的方向 感谢所有帮助 谢谢 尝试这个 window scroll 0 document documentEle
  • 统计并限制上传的文件数量(HTML文件输入)

    我有那个基本的 众所周知的多文件上传表单 类似的事情
  • 如何暂时停止标题属性显示工具提示?

    我在右键单击时显示了一个弹出 div 我知道这会破坏预期的功能 但 Google 文档会这样做 所以为什么不呢 但是 我在弹出窗口上显示的元素有一个 标题 属性集 该属性集出现在我的分区 我仍然希望工具提示能够工作 但当弹出窗口出现时就不行

随机推荐