css实现文字渐变边框渐变边框边框圆角

2021-10-25 13:35:10

代码

这里提供了俩种方法那个方便用那个。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#app {
				width: 174px;
				height: 66px;
				background-color: #fff;
				border-radius: 8px !important;
				position: relative;
			}

			#app::after {
				content: "";
				position: absolute;
				top: -4px;
				right: -4px;
				bottom: -4px;
				left: -4px;
				border-radius: 10px !important;
				background: linear-gradient(0deg, #F99F00, #FCC901);
				z-index: -999;
			}

			#app::before {
				content: "你看我啊";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin-top: -1px;
				font-size: 17px;
				font-weight: 500;
				background-image: -webkit-linear-gradient(bottom, #F99F00 0%, #FCC901 );
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="app">
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</body>
</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">
			#app {
				background: transparent;
				color: #23b7cb;
				font-size: 15px;
				border: 1px transparent solid;
				border-image: linear-gradient(0deg, #F99F00, #FCC901) 1 10 round;
				width: 100px;
                          /* 是否要加文字渐变呢 */
		/* 		background-image: -webkit-linear-gradient(bottom, red, #ff5f60, #f0c41b);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent; */
			}
		</style>
	</head>
	<body>
		<div id="app">
			你好
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</body>
</html>

上一篇：HTML/CSS中空元素有哪些？下一篇：使用CSS2对页面中的文字添加彩色边

网站建设

Css

css实现文字渐变边框渐变边框边框圆角

代码

这里提供了俩种方法那个方便用那个。。

另一种写法

Css

css实现文字渐变 边框渐变 边框 边框圆角

代码

这里提供了俩种方法 那个方便用那个。。

另一种 写法

css实现文字渐变边框渐变边框边框圆角

这里提供了俩种方法那个方便用那个。。

另一种写法