css 设置边框边角

效果

 

 css:

复制代码
.left-top,.right-top,.left-bottom,.right-bottom{
    position:absolute;
    width:13px;
    height:13px;
}
.left-top{
    left:0;
    top:0;
    border-left:solid 2px #045291;
    border-top:solid 2px #045291;
}
.right-top{
    right:0;
    top:0;
    border-right:solid 2px #045291;
    border-top:solid 2px #045291;
}
.left-bottom{
    left:0;
    bottom:0;
    border-left:solid 2px #045291;
    border-bottom:solid 2px #045291;
}
.right-bottom{
    right:0;
    bottom:0;
    border-right:solid 2px #045291;
    border-bottom:solid 2px #045291;
}
复制代码

html

复制代码
        <div class="count-resource ">
            <div class="com-count-title">企业总量统计</div>
            <div class="com-screen-content2">
                <ul class="use-data">
                    <li>
                        <p class="data-count">15681 </p>
                        <span class="data-name">企业总量</span>
                    </li>
                    <li>
                        <p class="data-count"> 5731</p>
                        <span class="data-name">平台注册量</span>
                    </li>
                    <li>
                        <p class="data-count">1000</p>
                        <span class="data-name">更新量</span>
                    </li>
                </ul>
                <div class="com-screen-content">
                 <div id="main2" style="margin-top:10px;width:100%;height:240px;"></div>
                </div>
                <span class="left-top"></span>
                <span class="right-top"></span>
                <span class="left-bottom"></span>
                <span class="right-bottom"></span>
            </div>
        </div>
复制代码

 

posted @   凉面好好吃  阅读(442)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示