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. VirtualBox安装Debian

    1.下载Debian的dvd1,按照http://www.jb51.net/os/85858.html网上教程安装Debian 1.1.我创建了20G的虚拟磁盘,分区的时候我分了3个区,2G交换空间, ...

  2. Python—网络通信编程之tcp通信编程

    服务端代码 import socket # 1.创建流式套接字实例 # server = socket.socket() server = socket.socket(socket.AF_INET, ...

  3. python-python基础3

    本章内容: 函数 递归 高阶函数 一.函数 一个函数一般完成一项特定的功能 函数使用     函数需要先定义     使用函数,调用

  4. NO33 第6--7关题目讲解

    客户端(电脑)通过浏览器输入域名,先找hosts文件及本地dns缓存,若都没有,就找localDNS服务器,若没有,localDNF服务器找根服务器(全球13台的那个根”.“服务器),根就把.com这 ...

  5. DirectX9完全面向对象框架

    #pragma once #define UNICODE //Direct3D lib #include<d3d9.h> #include<d3dx9.h> #pragma c ...

  6. 054、Java中使用for循环第二种写法实现1～100的累加

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  7. JS：递归基础及范例——斐波那契数列 、 杨辉三角

    定义:程序调用自身的编程技巧称为递归.一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解,递归策略只需少量的程序就 ...

  8. javascript中call与this的初见

    call定义 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明:call 方法可以用来代替另一 ...

  9. JAVA 怎么链接 SQL Server 数据库（半详细）

    哇今天闲着没事准备把前几天链接数据库碰到的问题写到博客,写到一半浏览器切出去了,这个浏览器也没保存,晚上又写了一遍,唉 蛋疼呀╮(╯▽╰)╭!! 说一说连接数据库遇到的问题,唉问题繁多,原来自己刷的精 ...

  10. Spark 下操作 HBase（1.0.0 新 API）

    hbase1.0.0版本提供了一些让人激动的功能,并且,在不牺牲稳定性的前提下,引入了新的API.虽然 1.0.0 兼容旧版本的 API,不过还是应该尽早地来熟悉下新版API.并且了解下如何与当下正红 ...