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

使用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-使用background实现四个角边框相关推荐

html边框颜色线性渐变,CSS线性渐变linear-gradient() 函数实现div边框四角样式
先看下要实现的效果. 四个角边框高亮 css代码实现红色框box-red样式,蓝色的只是变换了颜色.box-title是图上渐变实现. .box-red { background: linear-g ...
css 实现边框四个角效果
<div class="bottom"><div class="border_corner border_ ...
01.个人项目难点汇总2 css定制科技感缺角边框
01.CSS3实现缺角矩形,折角矩形以及缺角边框前言前几天偶然看到缺角矩形这个功能,脑袋中第一想法是,搞个绝对定位的伪元素,哪里需要挡哪里,或者找UI小哥聊聊天,忽然灵光一闪,想起之前翻过的< ...
html圆角半径,CSS3 / 绘制四个角不同半径的圆角边框 - 汇智网
绘制四个角不同半径的圆角边框如果要绘制的圆角边框四个角半径各不相同,可以将border-top-left-radius属性.border-top-right-radius属性.border-bott ...
html背景图片带边框,css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
基于CSS mask和clip-path实现切角的技巧
本文翻译自 Tricks to Cut Corners Using CSS Mask and Clip-Path Properties,略有删改原作者:Temani Afif 我们最近使用CSS m ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
原来CSS的background还可以这么玩
身为一个前端开发者,背景是开发中的常客.大到整个网站的主题背景,小到一个按钮的背景.CSS 的 background 属性基本上每天开发都会遇到,绝大多数情况下我们都只会使用到了纯色背景或者图片背景. ...
css button 四种状态,css中按钮的四种状态
css中按钮有四种状态普通状态 hover 鼠标悬停状态 active 点击状态 focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后的蓝色边框下面的 ...

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

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

最新文章

热门文章