CSS - 实现荧光边框

1，index.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。</p>

</div>

</body>

</html>

2，style.css

@import url('http://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');

body{

margin: 0;

padding: 0;

display: flex;

align-items: center;

justify-content: center;

min-height: 100vh;

background: #060c21;

font-family: 'Poppins',sans-serif;

}

.box{

position: relative;

width: 300px;

height: 400px;

display: flex;

justify-content: center;

align-items: center;

background: #060c21;

}

.box:before{

content: '';

background: #fff;

position: absolute;

top: -2px;

bottom: -2px;

left: -2px;

right: -2px;

z-index: -1;

}

.box:after{

content: '';

background: #fff;

position: absolute;

top: -2px;

bottom: -2px;

left: -2px;

right: -2px;

z-index: -2;

filter: blur(40px)

}

.box:before,.box:after{

background: linear-gradient(235deg,#89ff00,#060c21,

#00bcd4)

}

.content{

padding: 20px;

box-sizing: border-box;

color: #fff;

}

巴特西

CSS - 实现荧光边框

最新文章

热门文章