边框上带有文字

效果图：

实现代码

<div class="row wrap" style="margin-bottom: 20px; ">
　　<p class = "circleborder circleborderOne"></p>
　　<span class="wraptitle">社保收支统计</span>
　　<p class = "circleborder circlebordertwo"></p>
　　<div class="col-md-12"> <!--内容-->
　　　　<div class="c_center ysb_center" id="sb_d_1"></div>
　　</div>
</div>

样式：

.wrap{
　　margin-top: 10px;
　　position: relative;
　　border: 1px solid deepskyblue;
　　box-sizing: border-box;
}
.wraptitle{
　　position: absolute;
　　top: -12px;
　　left: 23px;
　　width: 106px;
　　padding: 0 5px;
　　color: #b9c9f1;
　　font-family: "微软雅黑";
　　background-color: #101d2d;
}

.circleborder{
　　display: block;
　　width: 10px;
　　height: 10px;
　　border-radius: 10px;
　　background-color: deepskyblue;
　　border: 1px solid deepskyblue;
}

.circleborderOne {
　　margin-top: -5px;
　　margin-left: 13px;
}

.circlebordertwo {
　　margin-top: -21px;
　　margin-left: 129px;
}

实现边框上带有文字也可以使用 fieldset

eg:

<form>
　　<fieldset>
　　　　<legend>健康信息</legend>
　　　　身高：<input type="text" />
　　　　体重：<input type="text" />
　　</fieldset>
</form>

时间： 2024-10-12 02:14:27

边框上带有文字的相关文章

div边框上添加文字问题解决

1 <fieldset class="northbtn" style="margin-left:8px;"> 2 <legend>搜索 </legend> 6 <input type="text" name="s_code" id="s_code" size="20" style="width:280px;border-radius:0

uibutton图片在上，文字在下。 图片在左 文字在右

//文字在左,图片在右 CGFloat imageWidth = self.button.imageView.frame.size.width; CGFloat labelWidth = self.button.titleLabel.frame.size.width; self.button.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, -labelWidth); self.button.titleEdgeInsets = UIEdge

如何去除图片上的文字(PS使用教程)

很多时候由于工作的需要,需要对我们的图片进行修改,修改的同时还想要保存我们的图片背景,所以很多人就不知道怎么弄了,小编跟大家分享一下使用PS如何简单的去掉图片上的文字,希望对大家有所帮助! 方法/步骤 1.打开PS软件,进入主界面,点击左上角[文件],在弹出的菜单栏点击[打开] 2.在本地列表中找到需要添加的图片,将其添加到PS画板中 3.点击左侧[选框工具],在弹出菜单栏点击[矩形选框] 4.利用选框工具,选择图片上的文字,然后右键点击 5.在弹出的菜单栏中,选择[填充]选项, 点击打开 6.

PS去掉图片上的文字的6种基本方法，动态教程

1.使用仿制图章工具去除文字这是比较常用的方法.具体的操作是,选取仿制图章工具,按住Alt键,在无文字区域点击相似的色彩或图案采样,然后在文字区域拖动鼠标复制以复盖文字.要注意的是,采样点即为复制的起始点.选择不同的笔刷直径会影响绘制的范围,而不同的笔刷硬度会影响绘制区域的边缘融合效果. 2.使用修补工具去除文字如果图片的背景色彩或图案比较一致,使用修补工具就比较方便.具体的操作是,选取修补工具,在公共栏中选择修补项为“源”,关闭“透明”选项.然后用修补工具框选文字,拖动到无文字区域中色彩或图案

CSS实现背景透明而背景上的文字不透明

在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6下的BUG,但这也不困难,加上一段js处理就行了.但假如我们需要一个半透明遮罩的弹出层,如登陆框.注册框.提示等,这时可能需要整个页面都要被半透明的遮罩层覆盖,那么如用背景平铺的话,此时此刻也许就不是一个好办法了,图片大了会影响加载速度,图片小了同样会增加页面的渲染计算量,那么这时也许就需要用CSS滤镜了. 假如有这样一个例子:“有一个DIV块,此DIV是黑色

python 图片上添加文字

1 import PIL 2 from PIL import ImageFont 3 from PIL import Image 4 from PIL import ImageDraw 5 6 #设置字体,如果没有,也可以不设置 7 font = ImageFont.truetype("/usr/share/fonts/truetype/ttf-dejavu/DejaVuSans.ttf",13) 8 9 #打开底版图片 10 imageFile = "base.png&qu

C#图片上写文字

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Drawing; namespace BitMap { /// <summary> /// Image 的摘要说明 /// </summary> public class Image : IHttpHandler { public void ProcessRequest(HttpConte

iOS--UIButton图片在上，文字在下

UIButton正常情况下是图片在左,文字在右,调整一下位置变成图片在上,文字在下,这个比较常用 - (void)setup { // 调整图片 self.imageView.xm_x = 0; self.imageView.xm_y = 0; self.imageView.xm_width = self.xm_width; self.imageView.xm_height = self.imageView.xm_width; // 调整文字 self.titleLabel.xm_x = 0;

在指定图片上生成文字，文字格式可调

在指定图片上生成文字,文字格式可调,最终效果为 public class Waterark { private int _width; private int _height; private string _fontFamily; private int _fontSize; private bool _adaptable; private FontStyle _fontStyle; private bool _shadow; private string _backgroundImage;