[分享]css做一个炫酷的边框

CSS是一种很强大的样式语言，它可以炫酷的装饰网页，今天我们来学习如何用CSS制作一个炫酷的边框吧！

.container {
		background-color: #f3f3f3;
		padding: 20px;
		border: none;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}

	.box {
		width: 400px;
		height: 400px;
		background-color: #fff;
		padding: 20px;
		position: relative;
	}

	.box:before,
	.box:after {
		content: "";
		position: absolute;
		border-radius: 50%;
	}

	.box:before {
		top: -5px;
		left: -5px;
		width: 35px;
		height: 35px;
		border: 5px solid #f1c40f;
	}

	.box:after {
		bottom: -5px;
		right: -5px;
		width: 35px;
		height: 35px;
		border: 5px solid #f1c40f;
	} 

让我们分解一下这段代码：

首先，我们定义了一个class为.container的div，它的背景颜色为#f3f3f3，内边距为20px，边框为none，阴影效果为box-shadow。

然后我们定义了一个class为.box的div，它的宽和高都是400px，背景颜色为白色，内边距为20px，定位为相对定位。我们利用:before和:after伪元素来制作边框。这两个伪元素都是绝对定位的，设置了border-radius为50%来实现圆角效果。

:before伪元素被定位到了.box的左上角，设置了宽和高为35px，边框颜色为#f1c40f。

:after伪元素被定位到了.box的右下角，设置了宽和高为35px，边框颜色也是#f1c40f。

然后我们就得到了一个炫酷的边框效果了！

以上就是利用CSS做炫酷边框的方法，希望本文能对你有所帮助。