纯CSS实现具有渐变和圆角的彩色边框

发布时间：2023-02-25 12:13:28 作者：佚名

传统的灰色纯色边框你是不是觉得太难看了？你是否想设计一些精美的边框，例如渐变、圆角、彩色的边框？那你来对地方了，本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩色边框

1、使用“border-image”属性

“border-image”属性是创建渐变边框的正确方法。

HTML

<div class="gradient-border -using-border-image">

</div>

该渐变边框使用了 gradient-border 和 -using-border-image 两个CSS属性。

CSS

.gradient-border {
--color-1: rebeccapurple;
--color-2: crimson;
--border-radius: 1.25rem;
--border-width: 0.5rem;
width: 100%;
padding: 2rem;
position: relative;
border-radius: var(--border-radius);
}
.gradient-border * + * {
margin-top: 0.5rem;
}
.gradient-border.-using-border-image {
border-width: var(--border-width);
border-style: solid;
-o-border-image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch;
border-image: linear-gradient(135deg, var(--color-1), var(--color-2)) 1 stretch;
}

2、使用clip-path属性

我们可以使用clip-path属性来画圆角，但内角保持方形。

HTML

<div class="gradient-border -using-border-image -using-clip-path">

</div>

该渐变边框除了使用了 gradient-border 和 -using-border-image 外，还用了一个 -using-clip-path 的CSS属性。

CSS

.gradient-border.-using-clip-path {
-webkit-clip-path: inset(0px round var(--border-radius));
clip-path: inset(0px round var(--border-radius));
}

3、使用伪元素

一个既有渐变又有半径的漂亮边框需要多一点CSS（和一个伪元素）。

HTML

<div class="gradient-border -using-pseudo-element">

</div>

该渐变圆角边框使用了伪元素（pseudo-element）来实现。

CSS

.gradient-border.-using-pseudo-element {
position: relative;
padding: calc(2rem + var(--border-width));
border-radius: var(--border-radius);
background-image: linear-gradient(135deg, var(--color-1), var(--color-2));
}
.gradient-border.-using-pseudo-element * {
position: relative;
z-index: 1;
}
.gradient-border.-using-pseudo-element::after {
content: "";
display: block;
position: absolute;
top: var(--border-width);
right: var(--border-width);
bottom: var(--border-width);
left: var(--border-width);
border-radius: calc(var(--border-radius) - var(--border-width));
background-color: var(--background);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

到此这篇关于纯CSS实现具有渐变和圆角的彩色边框的文章就介绍到这了,更多相关css圆角渐变内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

Tag：渐变边框圆角 css

纯CSS实现具有渐变和圆角的彩色边框
传统的灰色纯色边框你是不是觉得太难看了？你是否想设计一些精美的边框，例如渐变、圆角、彩色的边框？那你来对地方了，本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩
2023-02-25
CSS实现多层嵌套列表自动编号的示例代码
本文主要介绍了CSS实现多层嵌套列表自动编号的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
2023-02-24
css scroll-snap控制滚动元素的实现
本文主要介绍了css scroll-snap控制滚动元素的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习
2023-02-22
盘点五个惊艳一时的CSS属性(不常用但很有用)
这篇文章主要给大家介绍了五个惊艳一时的CSS属性,这些属性不常用但很有用,分别包括position: sticky、:empty 选择器、gap、background-clip: text、invalid 伪类等属性,需
2023-02-18
css 动画实现节流的示例代码
节流指的避免过于频繁的执行一个函数，基本上是通过js去控制节流问题，其实css也能做到节流，本文给大家讲解css 动画实现节流，感兴趣的朋友一起看看吧
2023-02-17
基于CSS实现元素融合效果
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，通过 css3 实现元素融合效果，感兴趣的朋友跟随小编
2023-02-14
基于CSS实现网页悬浮菜单效果
平时我们在浏览网页时，如下图的导航栏已经屡见不鲜了，当鼠标放上去时，右侧隐藏的内容就会慢慢平滑展开，非常美观且实用，今天小编通过本文给大家分享基于CSS实现网页悬
2023-02-13
一篇文章带你学会css变量(推荐!)
css全局变量定义方法很简单,其实就是在根元素上先定义声明,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你学会css变量的相关资料,文中通过实例代码介绍的非常详细,
2023-02-13
纯CSS实现loading加载中效果(多种展现形式)
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯 css 实现 loading 加载中（多种展现形式），下面
2023-02-08
css实现简易报警灯的示例代码
本文主要介绍了css实现简易报警灯的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-03