html5添加渐变边框效果,用CSS实现模块边框的渐变

傷城~ 2022-10-06 05:51 289阅读 0赞

用CSS实现模块边框的渐变，一起来看下demo.

float:left;

margin:50px;

width:250px;

height:250px;

box-sizing:border-box;

border:20px solid transparent;

background-clip:padding-box,border-box;

background-origin:padding-box,border-box;

background-image:linear-gradient(\#fff,\#fff),linear-gradient(\#FD6A74,\#FEB378);

\}

.gradient-block-horisontal \{

margin:50px;

float:left;

width:250px;

height:250px;

box-sizing:border-box;

border:20px solid transparent;

background-clip:padding-box,border-box;

background-origin:padding-box,border-box;

background-image:linear-gradient(90deg,\#fff,\#fff),linear-gradient(90deg,\#5c5fa5,\#893f60);

\}

.gradient-block-diagonal \{

float:left;

position:relative;

width:250px;

height:250px;

margin:50px;

box-sizing:border-box;

border:20px solid transparent;

background-clip:padding-box,border-box;

background-origin:padding-box,border-box;

background-image:linear-gradient(45deg,\#fff,\#fff),linear-gradient(45deg,\#5c5fa5,\#893f60);

\}

效果如下：

![4c8d590d760d078102127f25617a51df.png][]

大家 可以去尝试下。

[4c8d590d760d078102127f25617a51df.png]: /images/20221005/118cfbd4594b459e974bd8035225bbf2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css边框颜色渐变

css边框颜色渐变今儿遇到了一个小小的问题—— 怎么使边框颜色渐变。天秃噜，又是一个知识盲点，不碍事，遇山开山，遇海填海。解决问题就完了。百度可真是个好东

本是古典何须时尚/ 2023年02月10日 05:30/ 0 赞/ 248 阅读

相关 119.css按钮边框渐变发光特效

效果 (源码网盘地址在最后) ![51272696f1bf99f56cb31bfb3f84e75d.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

刺骨的言语ヽ痛彻心扉/ 2022年12月28日 12:38/ 0 赞/ 147 阅读

相关 border-image实现渐变边框

一：给矩形实现渐变边框 border: 4rpx solid; border-image: linear-gradient(45deg, d4741a, ee

叁歲伎倆/ 2022年12月25日 04:00/ 0 赞/ 294 阅读

相关 css渐变边框

border-right: 1px solid; border-image: linear-gradient(F2F2F2, D8D8D8, F2F2F2) 0

向右看齐/ 2022年11月15日 11:37/ 0 赞/ 279 阅读

相关 CSS实现渐变圆角边框

> 渐变边框可以使用 `border-image`，但带有圆角的渐变边框单靠 `border-image`却无法实现，那有哪些方法可以实现圆角渐变边框呢？ [css实用小知

小鱼儿/ 2022年10月19日 00:50/ 0 赞/ 397 阅读

相关 html5添加渐变边框效果,用CSS实现模块边框的渐变

用CSS实现模块边框的渐变，一起来看下demo. float:left; margin:50px; width:250px; height:250px; box-si

傷城~/ 2022年10月06日 05:51/ 0 赞/ 290 阅读

相关 246.CSS 渐变圆角边框

效果 (源码网盘地址在最后) ![70bd77719c286f0c0b60906286fb67b8.gif][] 源码 index.html <!DOC

痛定思痛。/ 2022年09月12日 12:44/ 0 赞/ 280 阅读

相关 243.边框和渐变

效果 (源码网盘地址在最后) ![67bc0b6014551ae5b2aadb52142508f0.gif][] 源码 index.html <!DOC

傷城~/ 2022年09月12日 12:44/ 0 赞/ 202 阅读

相关 242.CSS 渐变边框

效果 (源码网盘地址在最后) ![e34b82edcbfd358fb5d66ddef545f013.gif][] 源码 index.html <!DOC

朴灿烈づ我的快乐病毒、/ 2022年09月12日 12:43/ 0 赞/ 246 阅读

相关 css3边框颜色渐变

前言边框（border），平时最常用的样式之一，它可以设置宽度、样式和颜色。以前需求都比较单纯，颜色使用单色就能满足要求，但是现在不一样了，用户审美提高了，要求就三点：

秒速五厘米/ 2022年09月11日 00:27/ 0 赞/ 273 阅读