【大屏可视化】 flex布局下,边框边角线制作

大屏可视化文章目录大屏可视化flex布局下,边框边角线制作flex布局下,边框边角线制作/* flex布局下,边框边角线制作 *//* 外层div */.data-box1{border:0.005rem solid #032d60;-webkit-box-shadow:#07417a 0 0 0.05rem;-moz-box-shadow:#07417a 0 0 0.05rem;box-shad

黑森森

853人浏览 · 2022-05-16 11:52:57

黑森森 · 2022-05-16 11:52:57 发布

大屏可视化

文章目录

大屏可视化
- flex布局下,边框边角线制作

flex布局下,边框边角线制作

/* flex布局下,边框边角线制作 */
/* 外层div */
.data-box1{
    border:0.005rem solid #032d60;
    -webkit-box-shadow:#07417a 0 0 0.05rem;
    -moz-box-shadow:#07417a 0 0 0.05rem;
    box-shadow:inset 0 0 0.15rem #07417a;
    position:relative;
}
/* div下的<i>标签(也就是4个角) */
/*四个角*/
/* 单位是根据width:1920px来设计的,1rem=192px */
.topL{width:0.1rem;height:0.1rem;border-top-width:0.015rem;border-top-color:#26c6f0;border-top-style:solid;border-left-width:0.015rem;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:-0.015rem;left:-0.015rem}
.topR{width:0.1rem;height:0.1rem;border-top-width:0.015rem;border-top-color:#26c6f0;border-top-style:solid;border-right-width:0.015rem;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:-0.015rem;right:-0.015rem}
.bottomL{width:0.1rem;height:0.1rem;border-bottom-width:0.015rem;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:0.015rem;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:-0.015rem;left:-0.015rem}
.bottomR{width:0.1rem;height:0.1rem;border-bottom-width:0.015rem;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:0.015rem;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:-0.015rem;right:-0.015rem}

html内容：

<!-- 使用方式 -->
<div class="data-box1">
    <i class="topL"></i>
    <i class="topR"></i>
    <i class="bottomL"></i>
    <i class="bottomR"></i>
    <div>内容体...</div>
</div>