.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. POJ 2136 Vertical Histogram(当时写的比较恶心,优化一下)

    Vertical Histogram Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 21223 Accepted: 10048 ...

  2. Redis 6.0 新特性-多线程连环13问!

    Redis 6.0 来了 在全国一片祥和IT民工欢度五一节假日的时候,Redis 6.0不声不响地于5 月 2 日正式发布了,吓得我赶紧从床上爬起来,学无止境!学无止境! 对于6.0版本,Redis之 ...

  3. Jmeter-接口测试参数化后循环断言不同内容的方法

    前言 各位小伙伴在做接口自动化有没遇到过这样的问题,CSV文件参数化测试数据后,只能通过人工的的方法去查看结果,不懂写代码去循环断言返回的结果.今天我们来学习一下,不用写代码,就用响应断言,怎么实现循 ...

  4. C# 数据操作系列 - 0. 序言

    0. 前言 在上一个系列中,我们初步浏览了一下C#的基础知识.这句话的意思就是C#基础知识系列完结了,撒花.当然,并不是因为C#已经讲完了.正是因为我们轻轻地叩开了那扇门,才能看到门后面那瑰丽的世界. ...

  5. Python爬虫丨大众点评数据爬虫教程(2)

    大众点评数据爬虫获取教程 --- [SVG映射版本] 前言: 大众点评是一款非常受大众喜爱的一个第三方的美食相关的点评网站.从网站内可以推荐吃喝玩乐优惠信息,提供美食餐厅.酒店旅游.电影票.家居装修. ...

  6. STM32 标准库V3.5启动文件startup_stm32f10xxx.s分析

    layout: post tags: [STM32] comments: true 文章目录 layout: post tags: [STM32] comments: true 前言 分析startu ...

  7. zabbix-agent客户端安装与配置

    zabbix-agent客户端安装与配置 下载abbix-agent客户端源码软件包 解压agent源码包,并且切换到解压目录. [root@localhost ~]# tar -zxf zabbix ...

  8. ssh chroot 设置

    目的 让特定的用户登录linux服务器后,对其操作权限进行限制: 不能使用任何方式杀掉服务器现有的进程 最好只能查看相关的目录和文件 最好只能运行特定的命令,比如cat.ls.tail等 场景模拟 一 ...

  9. ReactNative报错:Can't find variable: __fbBatchedBridge

    最近开始研究ReactNative,首先根据网上教程 http://www.codeceo.com/article/windows-react-native-android.html 一步一步来.完成 ...

  10. Redis学习笔记(八) RDB持久化

    Redis是内存数据库,它将自己的数据库状态存储在内存里面,所以如果不想办法将存储在内存中的数据库状态保存到磁盘,那么服务器 进程一旦退出,服务器中的数据库状态也会消失不见. 为了解决这个问题,Red ...