.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. JS中switch语句做选择时为什么可以不用break?

    在JavaScript中,switch语句相比其他语言并没有特殊之处. 在使用时,我们要注意每个分支后都应加一条break语句,否则后面的分支仍然会执行.实际程序中,我发现有时没用break语句,仍然 ...

  2. C# 基础知识系列- 14 IO篇 文件的操作 (3)

    本篇继续前两篇内容,跟大家介绍一下Path类以及FileSystemInfo这个类的主要方法和属性. 上文提到,在<C# 基础知识系列-IO篇>之文件相关的内容完结之后,会带领大家开发一个 ...

  3. Longest XXX

    Longest Common Substring Brute Force 遍历a和b所有位置的组合,向后延伸,直到遇到两个不同的字符,复杂度是\(n^3\)级别. class Solution { p ...

  4. 码云git本地仓库链接远程仓库

    原文链接: 点我 git提交时,仓库是空的,本地有源码   应该打开cmd   归到项目路径 然后输入git push -u origin master -f 是把本地的项目强制推送到空的仓库 git ...

  5. CF思维联系– Codeforces-989C C. A Mist of Florescence

    ACM思维题训练集合 C. A Mist of Florescence time limit per test 1 second memory limit per test 256 megabytes ...

  6. USACO Training Section 1.1黑色星期五Friday the Thirteenth

    题目描述 13号又是一个星期五.13号在星期五比在其他日子少吗?为了回答这个问题,写一个程序,要求计算每个月的十三号落在周一到周日的次数.给出N年的一个周期,要求计算1900年1月1日至1900+N- ...

  7. 学习笔记之pip的基本使用

    粗略学习了pip的基础知识,便将此作为学习笔记记录下来同样希望分享的能帮到大家! 如果自己电脑没有pip,小澈在此分享如何安装,解决办法很多呢 1.使用easy_install安装: 各种进入到eas ...

  8. C. The Big Race

    \(给出数n,a,b\) \(在[1,n]区间内随机选数,选出的数被a,b除后同余的概率\) \(这题的精度问题真的是烦炸了~\) \(设最小公倍数lcm=a*b/gcd(a,b)\) \(所以在区间 ...

  9. D. Sequence Sorting dp

    D. Sequence Sorting 题目大意:给你一个序列,有一种操作就是对所有相同的数可以挪到最前面,也可以挪到最后面,问最少操作次数. 首先,对于很多个相同的数,可以缩成两个位置,一个是就是这 ...

  10. Spring学习笔记(八)Spring Data JPA学习

    ​ jpa简单的命名规则如下,这个不多做介绍,放在这里也是给自己以后查找起来方便,这篇文章主要介绍之前一直忽略了的几个点,像@NoRepositoryBean这个注解,以及怎么自定义Repositor ...