给带边线的盒子上贴图

就是这样的效果

给带边线的盒子上贴图_第1张图片
image.png

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

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

给带边线的盒子上贴图_第2张图片
image.png

定义和用法
fieldset 元素可将表单内的相关元素分组。

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

好了,希望能帮到你!

你可能感兴趣的:(给带边线的盒子上贴图)