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. 如何在linux中解压.rar文件

    在liunx下原本是不支持rar文件的,需要安装liunx下的winrar版本 步骤: 1.http://www.rarsoft.com/rar/rarlinux-4.0.1.tar.gz 从这个网址 ...

  2. Ajax--jQuery使用Ajax

    1.jQuery对Ajax操作进行了封装,在jQuery最底层的方法是$.ajax(),第二层是 load() , $.get() 和 $.post(),第三层是 $.getScript() 和 $. ...

  3. JDBC和连接池

    JDBC 所有的数据库操作框架都是用在JDBC的基础上做多次封装的,因为JDBC的操作很复杂 引入Jar包 连接数据库操作 书写sql语句,传参 查询,取值 关闭连接 //1.注册驱动(静态方法)(包 ...

  4. 【高软作业3】：原型化系统 DevTools

    原型化系统:DevTools       密码:lcx 1. 这是一个什么样的平台? DevTools,可译为:开发者工具库.初衷是聚集各类开发工具,方便开发者获取:此外,大家可以分享自己的工具库与工 ...

  5. GET乱码以及POST乱码的解决方法

    GET乱码以及POST乱码的解决方法 作者:东坡下载  来源:uzzf  发布时间:2010-10-14 11:40:01  点击: 一.GET乱码的解决方法 在tomcat的server.xml文件 ...

  6. StringGrid换行功能

    关闭stringgrid的defaultdrawing功能 StringGrid1.Cells[cCol,cRow] := '测试1'+#13#10+'测试2'; procedure TForm1.S ...

  7. JAVA虚拟机：Java技术体系讲解（一）

    按照Java系统的功能划分为: 一.Java语言,即使用Java编程语言进行软件开发. 二.开发过程中使用的工具和API(API(Application Programming Interface,应 ...

  8. 51nod 1099：任务执行顺序 贪心

    1099 任务执行顺序 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  取消关注 有N个任务需要执行,第i个任务计算时占R[i]个空间,而后会释放一部分, ...

  9. delphi对ZIP解压

    Delphi 对GZIP解压 作者:admin 来源:未知 日期:2010/5/9 13:08:46 人气:获取失败 标签: QQ空间新浪微博腾讯微博腾讯朋友QQ收藏百度空间百度贴吧更多0 呵呵,终于 ...

  10. Solr查询和过滤器执行顺序剖析

    一.简介 Solr的搜索主要由两个操作组成:找到与请求参数相匹配的文档:对这些文档进行排序,返回最相关的匹配文档.默认情况下,文档根据相关度进行排序.这意味着,找到匹配的文档集之后,需要另一个操作来计 ...