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

最新推荐文章于 2024-11-22 14:08:29 发布
最新推荐文章于 2024-11-22 14:08:29 发布
阅读量6.4k 收藏 6
点赞数 2
分类专栏： 前端 文章标签： CSS 使用background实现四个角边框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang704987562/article/details/85250074
版权

使用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>

效果：
在这里插入图片描述

CSS 使用图片作为4个角边框
hudeyong926的专栏
09-27 2174
lt;/div&gt; &lt;div class="bottom-left"&gt;&lt;/div&gt; &lt;div class="bottom-right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;style&gt; .box { width: 200px;
html背景图片带边框,css 使用background背景实现border边框效果
weixin_31649177的博客
06-04 1335
css中，我们一般使用border给html元素设置边框，但也可以使用background背景来模拟css边框效果，本文章向大家介绍css使用background背景实现border边框效果，需要的朋友可以参考一下。有一个段落P元素，我们需要给这个段落的每一行添加border-top效果，下面来看一下如何使用background背景实现border边框效果，实例代码如下所示：p {font-wei...
【我不熟悉的css】css使用background-clip，实现圆角彩色的边框，文字渐变色
qq_17335549的博客
10-08 1596
css使用background-clip，实现圆角彩色的边框
CSS给元素的四个角添加边框
最新发布
weixin_55800388的博客
11-22 612
在元素四周各绝对定位一个块级元素，给这个元素添加对应的边框即可。相对简单，代码不再演示。
css background实现四角边框
敲代码无敌小奶龙的博客
08-27 2307
css background实现四角边框
html背景边框特效代码,css 使用background背景实现border边框效果
weixin_34659856的博客
06-08 403
有一个段落P元素，我们需要给这个段落的每一行添加border-top效果，下面来看一下如何使用background背景实现border边框效果，实例代码如下所示：p {font-weight: 200;font-size: 1.7em;line-height: 1.7em;background: -webkit-linear-gradient(-90deg, #000 1px, rgba(0, 0...
实现CSS3中的border-radius(边框圆角)示例代码
09-25
如果只提供一个值，则四个角都会应用这个半径。两个值会设置对角线上的角，三个值会设置顶部两个角和底部两个角（或相反）。 2. 浏览器兼容性： 在早期，不同浏览器有不同的前缀 `-moz-` 和 `-webkit-` 来支持`...
css 实现边框四个角效果
每日秃头
07-08 2681
<div class="bottom"> <!-- 四个角的边框效果 --> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div> <div class="border_corner border_corner_left_bottom"&gt
css实现4个角有边框
Y_G_G的博客
10-14 3220
// html react JSX <div className={styles.intro} style={{background: 'rgba(255,255,255,'+ opacity+')'}}> <span className={styles.lpArrow}></span> <span cl...
CSS3实现内凹圆角的实例代码
09-24
通过使用伪元素（如`:before`或`:after`）并使用绝对定位，可以为元素的四个角分别设置内凹圆角。只需将上面的径向渐变样式应用于对应角的伪元素，并调整其位置，就可以组合出所需的内凹圆角效果。 这种方法的优点...
CSS技巧专栏：一日一例 7 - 纯CSS实现炫光边框按钮特效
uu0216的博客
07-17 2670
相信你可能已经在网络见过类似这样的流光的按钮，在羡慕别人做的按钮这么酷的时候，你有没有扒一下它的源代码的冲动？或者你当时有点冲动，却转眼忘却了。今天，刚巧，你又看到它了，今天跟我一起扒一扒它的源代码。左边按钮分析：1. 圆角按钮的光线效果，这个稍微费劲些。难点：动画层的路径移动2. 倒影。
html边框颜色线性渐变,CSS线性渐变linear-gradient() 函数实现div边框四角样式
weixin_39959794的博客
06-16 717
先看下要实现的效果。四个角边框高亮css代码实现 红色框box-red样式，蓝色的只是变换了颜色。box-title是图上渐变实现。.box-red {background: linear-gradient(#993333, #993333) left top, linear-gradient(#993333, #993333) left top, linear-gradient(#993333,...
css设置四角样式
Yomance的博客
02-22 523
通过background来实现 .demo{ background: linear-gradient(to left, #30729A, #30729A) left top no-repeat, linear-gradient(to bottom, #30729A, #30729A) left top no-repeat, linear-gradient(to left, #30729A, #30729A) right top no-repeat, linear-gradient(to bottom
css background 一半_精读CSS揭秘之背景与边框
weixin_34175189的博客
12-28 454
CSS对于前端工程师来说是基础中的基础，如果基础不扎实，就得日常跪求UED给图来实现效果。《CSS揭秘》这本书读来让人有满满的安全感，LEA VEROU 是CSS方面的专家，对CSS3的设计和未来的发展了解很多。描述的47个css技巧也很接地气，值得一读再读。本文是精读《CSS揭秘》系列文章的第一篇，预计有8篇，以一(kan)周(wo)一(xin)篇(qing)的进度发布。如无特殊说明，...
css设置画面平铺,css background-image如何平铺？
weixin_39683144的博客
08-03 981
以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。关于css3的background，功能很强大，有很多属性，像background-...
巧妙实现带圆角的渐变边框
qq_39581763的博客
05-14 553
如何实现下面这个渐变的边框效果： 这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个属性值。 顾名思义，我们可以给 border 元素添加 image，类似于 background-image，可以是图片也可以是渐变，不再局限于纯色。 ..
圆角边框、阴影、background
webshady的博客
04-03 442
一、圆角边框 语法：border-radius: 100px/50% 属性值越大 弧度越大 利用border-radius属性制作圆形的两个条件 ①元素的宽度和高度必须一样（正方形） ②属性值为宽度/高度的一半，或者直接写50% （长方形无法设置成一个圆） 如果是长方形，想设置成圆角矩形，则Border-radius：属性值设置为高度的一半 属性值 1个值 所有角都变化相同弧度 2个值
background-image实现边框效果，还不占位
绝逸红尘的博客
01-04 1261
background-image实现边框效果，还不占位
数据可视化中CSS实现四个边角特效实现
杨得朝的博客
11-27 2581
在数据可视化大屏中，我们看到人家的到做的很炫酷，如下图，中div四个边角的特殊颜色边角是怎么实现的呢，下面本人通过两种方式进行实现。 方式一 <body> <h1 class="title">css实现矩形边角加粗</h1> <div class="main"> <span></span> <span></span> <span></span> &
使用CSS实现多边框与透明边框的创新方法
若要创建多个边框，只需使用逗号分隔多个box-shadow值，每个值代表一个单独的阴影效果，从而实现多重边框。 例如： ```css background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink; ``` 这段...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值