css3 边框阴影效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div.box1{ width:300px; height:300px; padding:20px; position:relative; margin:0 auto; border: 1px solid #00c1de; box-shadow: 0 0 20px rgba(0, 198, 226, 0.5); } div.box2{ width:300px; height:300px; padding:20px; position:relative; border:1px solid #ccc; margin:0 auto; -webkit-box-shadow:0 5px 20px rgba(0,0,0,0.3) !important; -moz-box-shadow:0 5px 20px rgba(0,0,0,0.3) !important; box-shadow:0 5px 20px rgba(0,0,0,0.3) !important } div img{ width:100%; } </style> </head> <body> <div class="box1"> <img src="https://img.alicdn.com/tps/TB1ARGlNVXXXXX0XXXXXXXXXXXX-1600-880.png" alt=""> </div> <div class="box2"> <img src="https://img.alicdn.com/tps/TB1ARGlNVXXXXX0XXXXXXXXXXXX-1600-880.png" alt=""> </div> </body> </html>
css3 边框阴影效果的更多相关文章
- css3边框阴影效果
下面来说下css3阴影的语法: box-shadow:none | <shadow> [ , <shadow> ]* <shadow> = inset? & ...
- HTML 学习笔记 CSS3 (边框)
CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...
- css3 边框记
css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...
- css3 边框、背景、文本效果
浅玩CSS3 边框.背景.文本效果 一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h ...
- [HTML] CSS3 边框
CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...
- CSS3边框温故
1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...
- C# 无边框窗体边框阴影效果
通过下面代码在构造函数中调用方法 SetShadow(); 即可实现无边框窗体的阴影效果了 需要添加命名空间 using System.Runtime.InteropServices; private ...
- C#窗体四边框阴影效果的实现
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- CSS3 边框
说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...
随机推荐
- 紫书 习题8-12 UVa 1153(贪心)
本来以为这道题是考不相交区间, 结果还专门复习了一遍前面写的, 然后发现这道题的区间是不是 固定的, 是在一个范围内"滑动的", 只要右端点不超过截止时间就ok. 然后我就先考虑有 ...
- Android基础笔记(十三)- 内容提供者原理和简单使用
为什么要有内容提供者 内容提供者的工作原理 使用内容解析者对内容提供者进行增删改查操作 利用内容提供者和内容解析者备份手机短信 利用内容提供者插入短信 为什么要有内容提供者 内容提供者技术的目的是: ...
- oracle仿全文检索切词机制实现文本信息类似度查找
应用场景: 依据keyword查询与此keyword相似的信息,当中一些keyword要排除掉比如:"有限公司"."有限责任公司"."股份有限公司&q ...
- php函数in_array奇怪现象
$k = 0; $fieldArr = array('tt', 'bb'); if ( in_array( $k, $fieldArr)) { echo '1'; } 按理来说,是不会输出1的,可是最 ...
- hdu5282 最长公共子序列的变形
pid=5282">http://acm.hdu.edu.cn/showproblem.php?pid=5282 Problem Description Xuejiejie loves ...
- Mongodb集群之副本集
上篇咱们遗留了几个问题 1主节点是否能自己主动切换连接? 眼下须要手动切换 2主节点读写压力过大怎样解决 3从节点每一个上面的数据都是对数据库全量拷贝,从节点压力会不会过大 4数据压力达到机器支撑不了 ...
- bzoj1934: [Shoi2007]Vote 善意的投票(显然最小割)
1934: [Shoi2007]Vote 善意的投票 题目:传送门 题解: 明显的不能再明显的最小割... st连同意的,不同意的连ed 朋友之间两两连边(即双向边) 流量都为1... 为啥: 一个人 ...
- 获取当前最上层controller
- (UIViewController *)topViewController { UIViewController *resultVC; resultVC = [self _topViewContr ...
- [HNOI2012] 永无乡 解题报告 (splay+启发式合并)
题目链接:https://www.luogu.org/problemnew/show/P3224#sub 题目: 题目大意: 维护多个联通块,没有删除操作,每次询问某一联通块的第k大 解法: 维护联通 ...
- [codeforces 618 F] Double Knapsack (抽屉原理)
题目链接:http://codeforces.com/contest/618/problem/F 题目: 题目大意: 有两个大小为 N 的可重集 A, B, 每个元素都在 1 到 N 之间. 分别找出 ...