给带边线的盒子上贴图

就是这样的效果

image.png

如果是以前我会给带框的div一个border;就是全部给他边线,然后给带图的div大一点都高宽,超过图片,意思就是把多余不要都线都盖住...这样可能相对比较麻烦!如果下面的这个方法不好使,可以考虑这个思路!

那就是 fieldset 标签
这个时候就派上用场了,
他是介个样子的:

image.png

定义和用法
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend>标签为 fieldset元素定义标题。

HTML 4.01 与 HTML 5 之间的差异
HTML5 拥有如下属性:disabledformname,HTML 4.01 中不支持这些属性。

具体怎么用,那就看你们的咯!!!

对了,如果你用bootstrap,那么你就需要初始化!!

fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}
legend{padding:.5em;border:0;width:auto}

好了,希望能帮到你!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,706评论 1 41
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 9,553评论 1 25
  • 请参看我github中的wiki,不定期更新。https://github.com/ivonzhang/Front...
    zhangivon阅读 12,167评论 2 19
  • 昨天下午,我们在班里开了"消防知识知多少"的主题班会。我当了班里的摄影师。 首先,是六个小组分...
    5520田欣雨阅读 1,855评论 0 0

友情链接更多精彩内容