HTML\CSS-在边框中添加文本

fieldset{

border:10px solid transparent;/*其他边框透明*/

border-top-color:black;/*顶部边框黑色*/

box-sizing:border-box;

grid-area:1/1;/*从第1行第1列开始*/

padding:20px;

width:inherit;

}

②css -transform 旋转将4条边框合成为1个正方形

/*边框1 设置背景图*/

/* content-box 背景图在内容区定位 */

/* center/contain 以最大大小显示 */

fieldset:nth-of-type(1){

background:url("https://images.unsplash.com/photo-1588852065463-5de1411ea697?w=400") no-repeat content-box center/contain

}

fieldset:nth-of-type(2){ transform: rotate(90deg); }/*边框2-旋转90度*/

fieldset:nth-of-type(3){ transform: rotate(180deg); }/*边框3-旋转180度*/

fieldset:nth-of-type(4){ transform: rotate(-90deg); }/*边框4-旋转-90度*/

③设置

元素

/*边框3的标签旋转180度，使文字向上*/

fieldset:nth-of-type(3)>legend{ transform: rotate(180deg); }

/*设置标签的字体和间距*/

legend{

font: 15pt/0 'Averia Serif Libre';

margin: auto;

padding: 0 4px;

}

3/完整代码

body{

display:grid;/*网格*/

margin:auto;

margin-top: calc(50vh - 170px); /*视窗高度的一半-170px*/

width:300px;/*宽300px*/

height:300px;/*高300px*/

border:1px solid #ccc;/*灰色框1px*/

user-select: none;/*不能选取元素文本*/

-webkit-user-select: none;

}

/*先将4个