【css】渐变颜色边框

__Pluto__

已于 2024-08-01 15:52:33 修改

阅读量82

点赞数 1

分类专栏： css 文章标签： css 前端

于 2024-08-01 12:14:26 首次发布

本文链接：https://blog.csdn.net/weixin_49611304/article/details/140844436

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

* 注意：border-image的使用是不能实现圆角的效果，需要注意这个属性

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>渐变色边框</title>
		<style>
			body {
				background-color: #ccc;
				text-align: center;
			}

			/* 直角 */
			.ordinary {
				/* background: transparent; */
				width: 200px;
				height: 100px;
				margin: 50px auto;
				border: 10px transparent solid;
				border-image: linear-gradient(to right, #000718, #23b7cb) 1 10;
				color: #23b7cb;
				font-size: 20px;
				line-height: 100px;
			}

			/* 圆角 */
			.fillet-order {
				position: relative;
				width: 200px;
				height: 100px;
				margin: 50px auto;
				background: #fff;
				border: 1px transparent solid;
				border-radius: 20px;
				color: #23b7cb;
				font-size: 15px;
				line-height: 100px;
			}

			.fillet-order:after {
				position: absolute;
				top: -10px;
				bottom: -10px;
				left: -10px;
				right: -10px;
				content: '';
				background: linear-gradient(135deg, #000781, #23b7cb);
				border-radius: 30px;
				content: '';
				z-index: -1;
			}

			/* 圆角多色 */
			.fillet {
				position: relative;
				width: 200px;
				height: 100px;
				margin: 50px auto;
				border-radius: 6px;
				background-color: #fff;
				line-height: 100px;
			}

			.fillet::after {
				content: '';
				position: absolute;
				top: -10px;
				right: -10px;
				bottom: -10px;
				left: -10px;
				z-index: -1;
				border-radius: 12px;
				background-image: -webkit-linear-gradient(left, yellow 0%, blue 30%, red 60%, green 90%);
				background-color: red;
			}

            .shadow {
                margin: 100px auto;
				width: 200px;
				height: 200px;
				border-radius: 10%;
                background-color: #fff;
				box-shadow:
					-4px -4px 6px 4px yellow,
					4px 4px 6px 4px green;
            }

		</style>
	</head>
	<body>
		<div class="ordinary">直角的背景渐变</div>

		<div class="fillet-order">圆角的背景渐变</div>

		<div class="fillet">内外圆角渐变色边框示例</div>
        
        <div class="shadow">利用阴影也能模拟做圆角边框</div>
	</body>
</html>