特效 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([设置方向],[设置开始 ...
随机推荐
- JQuery学习(一)
本文是学习廖老师的Javascript全栈教程后的一些笔记. 使用jQuery: 方法一:下载jQuery库,并在html页面中引入,方式如下: 1 <html> 2 <head&g ...
- 为物联网而生:高性能时间序列数据库HiTSDB商业化首发!
为什么80%的码农都做不了架构师?>>> 摘要: 近日,阿里云宣布高性能时间序列数据库 (High-Performance Time Series Database , 简称 H ...
- CodeForces - 1047A
A. Little C Loves 3 I time limit per test1 second memory limit per test256 megabytes inputstandard i ...
- P1458 顺序的分数 Ordered Fractions(有技巧的枚举)+C++类封装=精简代码
题目描述 输入一个自然数N,对于一个最简分数a/b(分子和分母互质的分数),满足1<=b<=N,0<=a/b<=1,请找出所有满足条件的分数. 这有一个例子,当N=5时,所有解 ...
- andorid jar/库源码解析之okio
目录:andorid jar/库源码解析 Okio: 作用: 说白了,就是一个IO库,基于java原生io.来进行操作,内部做了优化,简洁,高效.所以受到了一部分人的喜欢和使用 栗子: 读写文件. p ...
- FPGA实现-shift_ram_3x3矩阵
shift_ram_3x3-FPGA实现 实现的方法为方法二,可以参考上一节关于中值滤波的介绍 shift_ram核介绍 https://www.cnblogs.com/ninghechuan/p/6 ...
- MongoDB 部署以及操作
目录 1.MongoDB简介 2.MongoDB优势 3.MongoDB安装 3.MongoDB用户管理 3.1.Mongodb创建超级管理员 3.2.MongoDB创建读写用户 3.3.Moongo ...
- 网络流 O - Marriage Match IV
题目链接:https://vjudge.net/contest/299467#problem/O 题目思路:网络流+最短路 这个是一个最短路+最大流,最短路容易,就是跑起点到每一个点的距离. 但是这个 ...
- Java变量相关
1.Java是强类型语言 所有的变量必须先声明,后使用: 指定类型后只能接受类型匹配的值: 2.变量声明 变量标识符由字母.数字.下划线和$组成: 关键字和保留字不能做标识符: 长度不限制: 大小写区 ...
- 《C程序设计语言》 练习2-4
问题描述 重新编写函数squeeze(s1,s2),将字符串s1中任何与字符串s2中字符匹配的字符都删除. Write an alternate version of squeeze(s1,s2) t ...