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

代码

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

<!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 100%);
				-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>
posted @ 2021-03-16 11:13  小泽沐优声  阅读(108)  评论(0)  编辑  收藏  举报