HTML

全局代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.mainControl{
			font-family: 'Helvetica Neue',Helvetica,'Lucida Grande',Arial,'Hiragino Sans GB','\5FAE\8F6F\96C5\9ED1','WenQuanYi Micro Hei',STHeiti,SimSun,sans-serif;
			font-size: 12px;
			left: 0;
			right: 0;
			text-align: center;
		}
		.myCR{
			border-radius: 12px;
			padding: 3px 11px;
			border: 1px solid transparent;
			background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff)),-webkit-gradient(linear,right top,left top,from(#70db96),color-stop(#66beb3),color-stop(#759bec),color-stop(#a277c8),color-stop(#f56a62),color-stop(#f9ac5e),to(#fdde5d));
			background-image: -o-linear-gradient(#fff,#fff),-o-linear-gradient(right,#70db96,#66beb3,#759bec,#a277c8,#f56a62,#f9ac5e,#fdde5d);
			background-image: linear-gradient(#fff,#fff),linear-gradient(270deg,#70db96,#66beb3,#759bec,#a277c8,#f56a62,#f9ac5e,#fdde5d);
			background-origin: border-box;
			background-clip: padding-box,border-box;
		}
	</style>
</head>
<body>
	<div class="mainControl">
		<span class="myCR">
			© <script type="text/javascript">document.write((new Date()).getFullYear());</script> 何星星 保留所有权利
		</span>
	</div>
</body>
</html>

CSS

核心代码

border-radius: 12px;
padding: 3px 11px;
border: 1px solid transparent;
background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#fff)),-webkit-gradient(linear,right top,left top,from(#70db96),color-stop(#66beb3),color-stop(#759bec),color-stop(#a277c8),color-stop(#f56a62),color-stop(#f9ac5e),to(#fdde5d));
background-image: -o-linear-gradient(#fff,#fff),-o-linear-gradient(right,#70db96,#66beb3,#759bec,#a277c8,#f56a62,#f9ac5e,#fdde5d);
background-image: linear-gradient(#fff,#fff),linear-gradient(270deg,#70db96,#66beb3,#759bec,#a277c8,#f56a62,#f9ac5e,#fdde5d);
background-origin: border-box;
background-clip: padding-box,border-box;

Demo

https://static.hexingxing.cn/v3/css/rainbow_borders/


友情提示:本站所有文章,如无特殊说明或标注,均为何星星原创发布。与此同时,趋于近年来本站的文章内容频繁被他站盗用与机器采集,现已全局禁用网站文字内容操作,了解详情或转载文章请 点此 继续!

1 条评论

Sm · 2023年11月25日 17:07

(๑•̀ㅂ•́)و✧

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用 * 标注