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

落日映苍穹つ 2022-04-02 06:19 708阅读 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 条评论，708人围观）

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

相关阅读

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

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

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

相关 CSS实现流动边框

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

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

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

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

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

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

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

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

相关 css实现斜角边框

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

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

相关如何用css的background写一个带斜切角、有边框又有内外阴影的按钮呢？

先附上另一大佬的链接[https://segmentfault.com/a/1190000038911131][https_segmentfault.com_a_1190000

快来打我*/ 2022年09月09日 06:08/ 0 赞/ 123 阅读

相关 CSS实现边框圆角

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

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

相关 ios UIView...可变的圆角和边框，某个角，多个角，设置圆角和边框

效果图： ![Center][] 主要类： VariableRoundedBorderView.h import <UIKit/UIKit.h>

末蓝、/ 2022年06月09日 05:16/ 0 赞/ 637 阅读

相关 css 四角辉光

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

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

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

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

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