vant组件库中的实现

https://vant-contrib.gitee.io/vant/#/zh-CN/divider#yin-ru

vant的Divider组件，采用的是伪类，before+after实现，以下的实现代码


<style>.van-divider {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;margin: 16px 0;color: #969799;font-size: 14px;line-height: 24px;border-color: #ebedf0;border-style: solid;border-width: 0;}.van-divider--content-center::before, .van-divider--content-left::before, .van-divider--content-right::before {margin-right: 16px;}.van-divider--hairline::before, .van-divider--hairline::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}.van-divider::before {content: '';}.van-divider::before, .van-divider::after {display: block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;box-sizing: border-box;height: 1px;border-color: inherit;border-style: inherit;border-width: 1px 0 0;}.van-divider--content-center::after, .van-divider--content-left::after, .van-divider--content-right::after {margin-left: 16px;content: '';}.van-divider--hairline::before, .van-divider--hairline::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}.van-divider::before, .van-divider::after {display: block;-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;box-sizing: border-box;height: 1px;border-color: inherit;border-style: inherit;border-width: 1px 0 0;}
</style>
<div role="separator" class="van-divider van-divider--hairline van-divider--content-center"style="border-color: rgb(25, 137, 250); color: rgb(25, 137, 250); padding: 0px 16px;">Divider
</div>

fieldset+legend实现

https://developer.mozilla.org/zh-cn/docs/web/html/element/fieldset

fieldse，legend感觉很生疏，但它可是元老级的标签，并且它支持所有浏览器

<style>fieldset {border: 0;border-top: 1px solid #4083C9;}legend {padding: 0 10px;}
</style><fieldset><legend>fieldset+legend</legend>
</fieldset>

fieldse，legend不隐藏其他边框，它是这样的

fieldse，legend 边框嵌套文字

https://css-tricks.com/how-to-add-text-in-borders-using-basic-html-elements/

<style>body{display: grid;margin: auto;margin-top: calc(50vh - 170px);width: 300px; height: 300px;}fieldset{border: 10px solid transparent;border-top-color: black;box-sizing: border-box;grid-area: 1 / 1;padding: 20px;width: inherit;}fieldset:nth-of-type(1){background: content-box center/contain no-repeat url("photo-1588852065463-5de1411ea697?w=400");}fieldset:nth-of-type(2){ transform: rotate(90deg); }fieldset:nth-of-type(3){ transform: rotate(180deg); }fieldset:nth-of-type(4){ transform: rotate(-90deg); }legend{font: 15pt/0 'Averia Serif Libre';margin: auto;padding: 0 4px;}fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); }body {user-select: none;-webkit-user-select: none;}
</style><fieldset><legend>Wash Your Hands</legend></fieldset>
<fieldset><legend>Stay Apart</legend></fieldset>
<fieldset><legend>Wear A Mask</legend></fieldset>
<fieldset><legend>Stay Home</legend></fieldset>

多边框嵌入文字

<style>body{display: grid;margin: auto;margin-top: calc(50vh - 170px);width: 300px; height: 300px;}fieldset{border: 10px solid transparent;border-top-color: black;box-sizing: border-box;grid-area: 1 / 2;padding: 20px;width: 136px;border-radius: 10px;}fieldset:nth-of-type(1){ transform: rotate(22.5deg); }fieldset:nth-of-type(2){ transform: rotate(67.5deg); }fieldset:nth-of-type(3){ transform: rotate(112.5deg); }fieldset:nth-of-type(4){ transform: rotate(157.5deg); }fieldset:nth-of-type(5){ transform: rotate(-22.5deg); }fieldset:nth-of-type(6){ transform: rotate(-67.5deg); }fieldset:nth-of-type(7){ transform: rotate(-112.5deg); }fieldset:nth-of-type(8){ transform: rotate(-157.5deg); }legend{font: 15pt/11px 'Averia Serif Libre';background: white;margin: auto;padding: 0 4px;}body {user-select: none;-webkit-user-select: none;}
</style>
<fieldset><legend>One</legend></fieldset>
<fieldset><legend>Two</legend></fieldset>
<fieldset><legend>Three</legend></fieldset>
<fieldset><legend>Four</legend></fieldset>
<fieldset><legend>Eight</legend></fieldset>
<fieldset><legend>Seven</legend></fieldset>
<fieldset><legend>Six</legend></fieldset>
<fieldset><legend>Five</legend></fieldset>

其他

https://codepen.io/Chokcoco/pen/zYKbQpN

分割线与边框嵌入文字相关推荐

android阴影分割线,android shape的使用及渐变色、分割线、边框、半透明阴影
shape使用.渐变色.分割线.边框.半透明.半透明阴影效果. 首先简单了解一下shape中常见的属性.(详细介绍参看 api文档) xmlns:android="http://schema ...
POI-HSSFWorkbook合并单元格边框及文字居中问题
POI-HSSFWorkbook合并单元格边框及文字居中问题首先创建一个需要合并单元格的样式 //合并的单元格样式 HSSFCellStyle boderStyle = wb.createCellS ...
php文字加边框,图片加特效文字图片添加各种边框的文字效果如果有多种边框模板就更好了...
一张普普通通的照片,如果巧妙加上配景的特效文字,就能瞬间变成独具风味的"艺术"照片了.我们在网上经常看到一些加了文字边框的唯美图片,那么这个是怎么制作出来的呢?使用照片特效处理工具 ...
图片如何加边框和文字？试试下面这三个方法吧
前几天和朋友出去玩的时候,由于好久没见,拍摄了许多的大合照.在准备将照片发朋友圈的时候,我们希望可以给图片添加上文字和边框,让照片看起来更加美观.于是我就花了点时间上网搜索了几个怎么给图片加上边框和文 ...
word 如何设置表格边框和文字间的距离
word 如何设置表格边框和文字间的距离 2010-06-23 14:58 OlandoV | 分类:办公软件 | 浏览10533次现在领导要我做1张表格,但是给出来的样板上某些表格中的文 ...
图片添加边框和文字怎么弄？图片编辑在线教学
大家平时在拍完照片后,会对它进行一些编辑处理吗?像我每次拍完照,都会对图片进行一些后期处理,有时也会给图片添加一些边框或者文字,美化图片并增加图片信息量.那你们平时都是怎么给图片加上边框和文字的呢 ...
一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 StatusDialog 和自定义 Toast,全部支持背景颜色,圆角,边框和文字的自定义,构建者模
MNProgressHUD 项目地址:maning0303/MNProgressHUD 简介: 一个常用的自定义弹框封装(适配 AndroidX),加载 ProgressDialog,状态显示的 S ...
C#实现图片叠加，图片上嵌入文字，文字生成图片的方法
/// <summary> /// 图片叠加 /// </summary> /// <param name="sender"& ...
css圆角边框、文字、盒子阴影
文章目录圆角边框.文字.盒子阴影圆角边框盒子阴影文字阴影圆角边框.文字.盒子阴影圆角边框 css3中新增了圆角边框样式 border-radius(半径)属性用于设置元素的外边框圆角参数 ...
Android 自定义View消除锯齿实现图片旋转,添加边框及文字说明
先看看图片的效果,左边是原图,右边是旋转之后的图: 之所以把这个写出来是因为在一个项目中需要用到这样的效果,我试过用FrameLayout布局如上的画面,然后旋转FrameLayout,随之而来也 ...

分割线与边框嵌入文字

vant组件库中的实现

fieldset+legend实现

fieldse，legend 边框嵌套文字

分割线与边框嵌入文字相关推荐

最新文章

热门文章