html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上

HTML里面有一个标签fieldset，可以实现文字写在边框上，今天项目想实现一个类似效果，并要求自定义边框上文字距离一侧的距离。下面青岛星网跟大家分享下纯CSS的实现方法。

先看下效果

HTML部分代码

文字标题

占位文字占位文字

文字标题

占位文字占位文字

CSS部分代码*{

margin:0;

padding:0;

}

.wrap{

margin: 100px auto;

width: 500px;

}

/* 方法一 start */

.method-1-wrap{

position: relative;

border: 1px solid #ccc;

padding: 20px;

box-sizing: border-box;

}

.method-1-wrap .title{

position: absolute;

top: -13px;

left: 10%;

line-height: 2em;

padding: 0 1em;

background-color: #fff;

}

/* 方法一 end */

/* 方法二 start */

.method-2-wrap .title{

position: relative;

text-align: center;

}

.method-2-wrap .title:before{

content: '';

position: absolute;

left:0;

right:0;

top: 50%;

border-top: 1px solid #ccc;

z-index: -1;

}

.method-2-wrap .title span{

padding: 0 1em;

background-color: #fff;

}

.method-2-wrap .content{

padding:20px;

}

/* 方法二 end */

html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上相关推荐

html fieldset 中DIV宽度,使用div+css模拟fieldset标签
fieldset是html中一个不常用的标签,一般用于包装表单元素或者显示一些提示信息,在浏览器中会有一些比较酷的效果.虽然绝大部分的浏览器都支持,但是显示的效果却不尽相同,如边框.宽度等,为了保持一 ...
用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言由于公司产品的活动,需要模拟类似下雪 ...
css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码，本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
html实现导航下拉菜单绝对定位,纯CSS导航下拉效果,神奇的定位与显示属性
导航下拉,大家首先想到的是用JS来做.或许是大家看到的下拉菜单演示,多是JS控制的下拉,导致从先入为主的意识上,误以为二级下拉是很难的东西,必须要会Javascript才能做. 其实,一个简答的下拉效 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
CSS模拟实现色阶效果
CSS模拟实现色阶效果,对各种版本的浏览器兼容性考虑的挺周全,在兼容性方面出色,这个只是模拟色阶的效果,显示出不同的色块的深浅颜色,并标识出来英文的颜色名称,其实技术方面不太难,只是有些麻烦,非常感谢 ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...

html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上

html字体效果标签,纯CSS模拟fieldset标签效果把文字写在边框上相关推荐

最新文章

热门文章