css带角边框制作

雨点打透心脏的1/2处 2023-10-14 01:27 34阅读 0赞

![2fb935cb2e12410d803920aa71fd9976.png][]

<div class="border"></div>
    
    
    <style>
        .border {
        width:100px;
        height:50px;
        background: linear-gradient(to left, #2CD5FF, #2CD5FF) left top no-repeat,
            linear-gradient(to bottom, #2CD5FF, #2CD5FF) left top no-repeat,
            linear-gradient(to left, #2CD5FF, #2CD5FF) right top no-repeat,
            linear-gradient(to bottom, #2CD5FF, #2CD5FF) right top no-repeat,
            linear-gradient(to left, #2CD5FF, #2CD5FF) left bottom no-repeat,
            linear-gradient(to bottom, #2CD5FF, #2CD5FF) left bottom no-repeat,
            linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat,
            linear-gradient(to left, #2CD5FF, #2CD5FF) right bottom no-repeat;
        background-size: 1px 8px, 8px 1px, 1px 8px, 8px 1px;
        border: 1px solid #073F97;
        position: relative;
        box-shadow: inset 0px 0px 18px 0px #0048C3;
    }
    </style>

[2fb935cb2e12410d803920aa71fd9976.png]: https://img-blog.csdnimg.cn/2fb935cb2e12410d803920aa71fd9976.png

发表评论取消回复

表情：

评论列表（有 0 条评论，34人围观）

还没有评论，来说两句吧...

相关阅读

相关 css带角边框制作

![2fb935cb2e12410d803920aa71fd9976.png][] <div class="border"></div>

雨点打透心脏的1/2处/ 2023年10月14日 01:27/ 0 赞/ 35 阅读

相关 css实现只有四个角才有边框

页面效果 ![20201112170812662.png][] <div className="border_table_box"> <di

桃扇骨/ 2022年12月20日 12:52/ 0 赞/ 181 阅读

相关纯CSS画三角形（带边框）【转】

实例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

蔚落/ 2022年11月30日 12:37/ 0 赞/ 184 阅读

相关 CSS3实现缺角矩形，缺角边框以及折角矩形

> 项目中经常用到不规则的背景或边框，最直接的解决方案是通过切图或用伪类before、after遮挡，但是这两种方法都有弊端，索性花时间整理学习一下更好的解决方案，方便取用。

﹏ヽ暗。殇╰゛Y/ 2022年11月24日 14:27/ 0 赞/ 435 阅读

相关纯CSS画三角形（带边框）【转】

实例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

拼搏现实的明天。/ 2022年10月31日 13:47/ 0 赞/ 175 阅读

相关 CSS制作三角边框

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>字符制作三角边

比眉伴天荒/ 2022年08月07日 13:35/ 0 赞/ 175 阅读

相关 CSS-使用background实现四个角边框

使用background实现四个角边框。 CSS .question_title_content { background: linear-gra

落日映苍穹つ/ 2022年04月02日 06:19/ 1 赞/ 712 阅读

相关 CSS制作圆角边框

转自： [http://blog.onlygrape.com/css-arc/362][http_blog.onlygrape.com_css-arc_362] 一直做圆角的

亦凉/ 2022年01月07日 12:13/ 0 赞/ 386 阅读

相关 css边框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

妖狐艹你老母/ 2021年12月11日 02:23/ 0 赞/ 414 阅读

相关 css实现带边框的冒泡提示框

![1019621-20190605173805396-269949678.png][] 需求是实现这种效果，因为内容是动态的，使用图片不是很好: 原因：如

本是古典何须时尚/ 2021年10月29日 06:44/ 0 赞/ 283 阅读