.box{   子级
position: relative;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-content: center;
background: #1B6D85;
} .box::before{
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
background: white;
z-index: -1;
} .box::after{
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom: -2px;
left: -2px;
background: white;
z-index: -2;
filter: blur(60px);
} .box::before,
.box::after{
background: linear-gradient(235deg,#89ff00,#1b6d85,#00bcd4);
} .content{ 父级
color: white;
padding: 20px; }

特效 css3 渐变背景框的更多相关文章

  1. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  2. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景

    CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.backgroun ...

  4. CSS3透明背景+渐变样式

    CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...

  5. 第161天:CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  6. css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变

    css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...

  7. 渐变背景 css3渐变效果及代码

    渐变背景及代码  http://uigradients.com/#Behongo

  8. jquery /css3 全屏的渐变背景

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css3 Gradient背景

    css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...

随机推荐

  1. WCF客户端和服务的实现

    WCF客户端和服务 ?服务器端: – 定义和实现服务契约 – 为服务类型构建ServiceHost实例,暴露endpoints – 打开通讯通道 ?客户端: – 需要服务契约的一个副本和关于endpo ...

  2. 思维+模拟--POJ 1013 Counterfeit Dollar

    Sally Jones has a dozen Voyageur silver dollars. However, only eleven of the coins are true silver d ...

  3. C++ 模板(template) 的定义

    定义: 模板(template)是实现代码重用机制的一种工具,它可以实现类型参数化,把类型定义为参数(模板元编程),从而实现了真正的代码可重用性. 模板是用来批量生成功能和形式都几乎相同的代码的.编译 ...

  4. P4932 浏览器(统计二进制1的个数)

    P4932 浏览器 有\(n\)个数,\(x_1,x_2,\cdots,x_n\),问你有多少对\((u,v)\),使得\(x_u\operatorname{xor}x_v\)的二进制表示中有奇数个\ ...

  5. http抓包—Content-Type讲解

    1.Content-Type的定义 Content-Type(MediaType),即是Internet Media Type,互联网媒体类型,也叫做MIME类型.在互联网中有成百上千中不同的数据类型 ...

  6. libevent(四)event_base 2

    接上文libevent(三)event_base event_io_map event_list是双向链表,min_heap是小根堆,那event_io_map是什么呢? #ifdef WIN32 # ...

  7. spring cloud系列教程第一篇-介绍

    spring cloud系列教程第一篇-介绍 前言: 现在Java招聘中最常见的是会微服务开发,微服务已经在国内火了几年了,而且也成了趋势了.那么,微服务只是指spring boot吗?当然不是了,微 ...

  8. Programming Languages_05 FWAE

    FWAE : Concrete syntax <FWAE> ::= <num> | {+ <FWAE> <FWAE>} | {- <FWAE> ...

  9. 李婷华 201771010113 《面向对象程序设计(java)》 第三周学习总结

    第一部分:理论知识回顾 第一章 再次了解了java“白皮书”的关键术语,java的常见术语,对于“白皮书”的关键术语依然环游不太理解的. 第二章 在使用命令行工具运行java程序的过程中,依然会有环境 ...

  10. Qt之xml文件解析

    XML文件简介 XML - EXtensible Markup Language,可拓展标记语言 Qt中加载XML模块 .pro 文件中添加 QT += xml Qt的XML访问方式 引用:https ...