特效 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([设置方向],[设置开始 ...
随机推荐
- WCF客户端和服务的实现
WCF客户端和服务 ?服务器端: – 定义和实现服务契约 – 为服务类型构建ServiceHost实例,暴露endpoints – 打开通讯通道 ?客户端: – 需要服务契约的一个副本和关于endpo ...
- 思维+模拟--POJ 1013 Counterfeit Dollar
Sally Jones has a dozen Voyageur silver dollars. However, only eleven of the coins are true silver d ...
- C++ 模板(template) 的定义
定义: 模板(template)是实现代码重用机制的一种工具,它可以实现类型参数化,把类型定义为参数(模板元编程),从而实现了真正的代码可重用性. 模板是用来批量生成功能和形式都几乎相同的代码的.编译 ...
- P4932 浏览器(统计二进制1的个数)
P4932 浏览器 有\(n\)个数,\(x_1,x_2,\cdots,x_n\),问你有多少对\((u,v)\),使得\(x_u\operatorname{xor}x_v\)的二进制表示中有奇数个\ ...
- http抓包—Content-Type讲解
1.Content-Type的定义 Content-Type(MediaType),即是Internet Media Type,互联网媒体类型,也叫做MIME类型.在互联网中有成百上千中不同的数据类型 ...
- libevent(四)event_base 2
接上文libevent(三)event_base event_io_map event_list是双向链表,min_heap是小根堆,那event_io_map是什么呢? #ifdef WIN32 # ...
- spring cloud系列教程第一篇-介绍
spring cloud系列教程第一篇-介绍 前言: 现在Java招聘中最常见的是会微服务开发,微服务已经在国内火了几年了,而且也成了趋势了.那么,微服务只是指spring boot吗?当然不是了,微 ...
- Programming Languages_05 FWAE
FWAE : Concrete syntax <FWAE> ::= <num> | {+ <FWAE> <FWAE>} | {- <FWAE> ...
- 李婷华 201771010113 《面向对象程序设计(java)》 第三周学习总结
第一部分:理论知识回顾 第一章 再次了解了java“白皮书”的关键术语,java的常见术语,对于“白皮书”的关键术语依然环游不太理解的. 第二章 在使用命令行工具运行java程序的过程中,依然会有环境 ...
- Qt之xml文件解析
XML文件简介 XML - EXtensible Markup Language,可拓展标记语言 Qt中加载XML模块 .pro 文件中添加 QT += xml Qt的XML访问方式 引用:https ...