特效 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([设置方向],[设置开始 ...
随机推荐
- WFP之位图效果
首先看一个图片: 在"第一步"这个按钮周围,有一转红色,这个效果就是用WPF的位图效果实现的. 位图效果(BitmapEffect 对象)是简单的像素处理操作.位图效果将 Bi ...
- 数学--数论--HDU2136 Largest prime factor 线性筛法变形
Problem Description Everybody knows any number can be combined by the prime number. Now, your task i ...
- git的下载与安装
Git的下载地址:https://git-scm.com/download/win 第一步:根据自己电脑的位数下载Git 第二步:下载安装包,放到指定的文件夹 第三步:更换路径安装Git(也可以放在C ...
- Java——Java泛型
该系列博文会告诉你如何从入门到进阶,一步步地学习Java基础知识,并上手进行实战,接着了解每个Java知识点背后的实现原理,更完整地了解整个Java技术体系,形成自己的知识框架. 一.泛型概述 1.定 ...
- JAVA设计模式之单例(singleton)
一.饿汉式 /** * 饿汉式 */public class Singleton01 { private static final Singleton01 instance = new Singlet ...
- 面向开发者的Docker实践
show me the code and talk to me,做的出来更要说的明白 本文源码,请点击learnSpringboot 我是布尔bl,你的支持是我分享的动力! 一. 引入 有开发经验的都 ...
- python学习之列表的定义以及增删改查
列表定义: >>> name['lily','lucy','tom'] >>> nums = [11,22,33,'100','lily'] #python中的列表 ...
- 汽车安全攻击篇:智能网联系统的短板,如何防护汽车的安全C
我们在<速度与激情>里,经常可以看到主角们利用网络侵入汽车网络系统,然后任意的操纵这些车辆,看电影的时候会被画面所震撼到,这两年"自动驾驶"随着特斯拉的车已经越来越普及 ...
- hadoop文件系统常用操作
详细可参考hadoop官方文档filesystem shell一节 使用hadoop离不开文件系统,比如hdfs,我们可能需要从hdfs中读取文件作为输入,并将输出保存到hdfs上某个文件中 首先创建 ...
- [hdu5254]BFS
题意:如果一个格子的相邻四个格子中存在两个格子被标记,且这两个格子有公共点,那么这个格子也被标记.给定初始的标记状态,求最终有多少个格子被标记了 思路: 依次对每个格子进行处理,看它能否”生成“新的被 ...