1，index.html
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="content">
<h1>HTML5 简介</h1>
<p>HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
 
HTML5 简单易学。</p>
</div>
</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 - 实现荧光边框的更多相关文章

  1. css挤带边框的三角

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. Jquery中css()方法获取边框长度

    1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...

  3. css样式之边框和内外边距

    1.css样式之边框:border 实心的边框: <!DOCTYPE html><html> <head> <meta http-equiv="co ...

  4. 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]

    这个效果可是通过代码实现的哦,在不同浏览器下都可以正常显示 对于html中使用CSS实现透明边框的效果,主要有以下四种属性设置方法,但由于 这些属性兼容性并不是很好,单一使用会造成不同浏览器显示效果不 ...

  5. CSS Border（边框）

    CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来 ...

  6. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  7. HTML&CSS基础-外边框

    HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...

  8. HTML&CSS基础-内边框

    HTML&CSS基础-内边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html> &l ...

  9. css美化Div边框的样式实例*（转载）

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

随机推荐

  1. 联想电脑硬盘保护系统EDU8.0.1iso安装

    管理306机房4年了,15年我带领的第一批学生参加吉林省职业院校技能大赛的时候,领导把这个机房交给我负责.那个时候这个机房的机器是全校的顶配,30台DELL16G内存,2T硬盘,I7处理器,后面是6组 ...

  2. 解决dotnet-Angular的跨域(cors)问题

    解决dotnet-Angular的跨域(cors)问题 前言 之前学了点 Angular ,打算用 dotnet core 做后端,之前没接触过这方面的东西,理所当然的遇到了跨域问题,之后也解决了,所 ...

  3. IdentityServer4专题之二：OpenID介绍

    1.基于概念 OpenId是一个以用户为中心的数字身份识别框架,它具有开放.分散.自由等特性.OpenId的创建是基于这样一个概念:我们可以通过URI(或者URL网址)来识别一个网站.同样,我们也可以 ...

  4. 循环调用spring的dao，数个过后无响应

    循环调用spring的dao,数个过后无响应 博客分类: spring daospringssh      最近遇到这么一个问题:前台按钮发送AJax请求到后台,后台是SSH框架.每点击一下按钮就发送 ...

  5. 写给java web一年左右工作经验的人

      摘要 大学就开始学习web,磕磕绊绊一路走过来,当中得到过开源社区很多的帮助,总结了这些年来的技术积累,回馈给开源社区. ps:图片都是从网上盗...感谢原作者. ps:文字千真万确都是我自己写的 ...

  6. Echarts 折线图y轴标签值过长 显示

    参考: https://blog.csdn.net/dandelion_drq/article/details/79270597 改变Y轴单位:https://www.cnblogs.com/cons ...

  7. Wpa_supplicant 调试故障原因分析

    背景 在使用Wpa_supplicant 工具调试Linux的wifi的时候,发现有一些问题.特此记录一下.有些问题是遇到的并已经有了解决方法,一些问题比较发杂,只能作为思路. 问题以及解决办法 1. ...

  8. Java的SpringMVC执行流程

    SpringMVC找Controller流程 1.扫描整个项目(Spring已经做了)定义一个Map集合. 2.拿到所有加了@Controller注解的类. 3.遍历类里面的所有方法对象. 4.判断方 ...

  9. sql数据库系统表和mysql系统表

    sql数据库系统表,常用的(sysobjects,sysindexes,sysindexkeys,SYSCOLUMNS,SYSTYPES 及更多解释说明): https://docs.microsof ...

  10. hadoop安装文档

    一.准备 该准备工作在三台机器上都需要进行,首先使用 vmvare 创建 1 个虚拟机,这台虚拟机是 master,一会需要把 master 克隆出两台 slave 点确定然后开启此虚拟机 然后添加/ ...