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

落日映苍穹つ 2022-04-02 06:19 729阅读 1赞

使用background实现四个角边框。  
CSS

.question_title_content {
        background: linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left top no-repeat, 
     linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left top no-repeat, 
     linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right top no-repeat,
     linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right top no-repeat, 
     linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left bottom no-repeat,
     linear-gradient(to bottom, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left bottom no-repeat,
     linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right bottom no-repeat,
     linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) right bottom no-repeat;
       /*设置大小*/
        background-size: 0.15rem 0.6rem, 0.6rem 0.15rem, 0.15rem 0.6rem, 0.6rem 0.15rem;
    }

HTML

<div class="question_title_content describe2">内容</div>

效果：  
![在这里插入图片描述][20181225162557334.jpg]

[20181225162557334.jpg]: /images/20220402/9d45c2fd06a14d029042fdb4391ef5fe.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css带角边框制作

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

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

相关 css实现四边形四角边框效果（没有使用定位，避免布局影响）

实现下面这种效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG

小灰灰/ 2023年07月17日 14:07/ 0 赞/ 35 阅读

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

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

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

相关 CSS实现流动边框

【写在前面】咳咳，首先讲个题外话，原本我是做 C++/Qt 的，然而因为工作 ( 部分原因 ) 学起了前端。当然，这也并不意味着我会丢掉 C++/Qt/Qml 这些

今天药忘吃喽~/ 2022年12月13日 11:27/ 0 赞/ 301 阅读

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

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

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

相关 css中的background的几个属性(background-attachment/background-origin,background-clip等)

关于background中的几个属性： background-orgin background-clip background-size background

忘是亡心i/ 2022年09月30日 13:46/ 0 赞/ 270 阅读

相关 css实现斜角边框

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oub5pGHwrA_s

梦里梦外;/ 2022年09月09日 13:53/ 0 赞/ 858 阅读

相关 CSS实现边框圆角

CSS实现边框圆角通过设置border-radius可以实现圆角边框的效果。 1.分别设置四个角的半径值在border-radius属性中，依次书写四个角的半

短命女/ 2022年06月09日 05:39/ 0 赞/ 487 阅读

相关 css 四角辉光

原文出处： [http://www.cnblogs.com/vali/p/8674649.html][http_www.cnblogs.com_vali_p_8674649.h

灰太狼/ 2022年05月20日 09:13/ 0 赞/ 152 阅读

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

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

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