特效 css3 渐变背景框
.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 渐变背景框的更多相关文章
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景
CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片.可以指定背景大小.设置背景渐变等功能.CSS3规范中定义的背景属性新增了background-clip.backgroun ...
- CSS3透明背景+渐变样式
CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果 ...
- 第161天:CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...
- css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变
css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: ...
- 渐变背景 css3渐变效果及代码
渐变背景及代码 http://uigradients.com/#Behongo
- jquery /css3 全屏的渐变背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3 Gradient背景
css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...
随机推荐
- 《Exchange Server 2010 SP1/SP2管理实践》——第2章 搭建Exchange实验环境2.1 网络环境规划...
本节书摘来自异步社区<Exchange Server 2010 SP1/SP2管理实践>一书中的第2章,第2.1节,作者: 王淑江 更多章节内容可以访问云栖社区"异步社区&quo ...
- nginx 反向代理转发导致css,js,图片失效
为什么80%的码农都做不了架构师?>>> 需要添加以下配置 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { proxy_pass htt ...
- Clickhouse 条形图📊函数展示
Clickhouse 条形图
- Fibonacci Sequence
0 递归 斐波那契数列定义: $F(n)=\left\{\begin{matrix}0, & n=0\\ 1, & n=1\\ F(n-1)+F(n-2), & n>1\ ...
- C++课程设计详解-12306的模拟实现
目录 设计思路... 3 思路分析:.... 3 数据组织:.... 4 具体功能实现过程... 4 管理端具体功能实现:.... 4 用户端具体功能实现:.... 5 调试截图和调试过程中遇到的问题 ...
- RF(控制台及日志输出中文乱码)
1.查看 ride 版本,我这里是 RIDE 1.7.4.1 running on Python 3.6.0. 2.修改文件 D:\python3.6\Lib\site-packages\roboti ...
- 最短路径树:Dijstra算法
一.背景 全文根据<算法-第四版>,Dijkstra算法.我们把问题抽象为2步:1.数据结构抽象 2.实现 二.算法分析 2.1 数据结构 顶点+边->图.注意:Dijkstra ...
- nginx代理vue项目
很多项目的前端都使用vue编写的,在项目上线部署的时候,有些项目要求把前端页面和后台服务部署在不同的服务器,这就要求使用nginx代理,本文就来讲讲vue项目怎么使用nginx代理. 项目github ...
- js+css制作简单的轮播图带有定时功能
用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Matlab2016b线性规划函数linprog的几个问题
一.如何设置算法为单纯型法: options = optimoptions('linprog','Algorithm','dual-simplex') 二.linprog的参数用法: [x,Fval, ...