<!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 边框阴影效果的更多相关文章

  1. css3边框阴影效果

    下面来说下css3阴影的语法: box-shadow:none | <shadow> [ , <shadow> ]* <shadow> = inset? & ...

  2. HTML 学习笔记 CSS3 (边框)

    CSS3边框 通过CSS3边框 你能够创建远角边框 向矩形边框添加阴影 使用图片来绘制边框 . CSS3的边框属性 主要包含以下几种 border-radius 边框圆角 box-shadow 边框阴 ...

  3. css3 边框记

    css3 边框 border属性在css1中就已经定义了,使用它可以设置元素的边框风格,边框颜色以及边框粗细. border-width:设置元素边框的粗细. border-color:设置元素边框的 ...

  4. css3 边框、背景、文本效果

    浅玩CSS3 边框.背景.文本效果 一.边框 box-shadow box-shadow: h-shadow v-shadow blur spread color inset(ontset); //h ...

  5. [HTML] CSS3 边框

    CSS3 边框 用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop. 在本章中,您将了解以下的边框属性: border-radius box-shado ...

  6. CSS3边框温故

    1.简介:border属性在CSS1中就已经定义了,用来设置元素边框风格,设置不同的边框.颜色.粗细 2.基本属性,包括三个类型值:(1)border-width:设置元素边框的粗细,默认3~4px( ...

  7. C# 无边框窗体边框阴影效果

    通过下面代码在构造函数中调用方法 SetShadow(); 即可实现无边框窗体的阴影效果了 需要添加命名空间 using System.Runtime.InteropServices; private ...

  8. C#窗体四边框阴影效果的实现

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. CSS3 边框

    说明:CSS3完全向后兼容,因此不必改变现有的设计.浏览器通常支持CSS2 CSS3模块 CSS3被划分为模块: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CS ...

随机推荐

  1. 数据结构之---C语言实现拓扑排序AOV图

    //有向图的拓扑排序 //杨鑫 #include <stdio.h> #include <stdlib.h> #include <string.h> #define ...

  2. hpuoj--校赛--考试来了（水题）

    问题 C: 感恩节KK专场--考试来了 时间限制: 1 Sec  内存限制: 128 MB 提交: 475  解决: 112 [提交][状态][讨论版] 题目描述 很多课程马上就结课了,随之而来的就是 ...

  3. 登录那些事儿+ Session原理

    http://cnodejs.org/topic/5671441a1d2912ce2a35aaa1  登录那些事儿 http://www.jianshu.com/p/2b7c10291aad Sess ...

  4. [HNOI2012] 永无乡 解题报告 (splay+启发式合并)

    题目链接:https://www.luogu.org/problemnew/show/P3224#sub 题目: 题目大意: 维护多个联通块,没有删除操作,每次询问某一联通块的第k大 解法: 维护联通 ...

  5. react --- 路由传参的几种方式

    1.params 优势 : 刷新地址栏,参数依然存在缺点:只能传字符串,并且,如果传的值太多的话,url会变得长而丑陋. 2.query 优势:传参优雅,传递参数可传对象:缺点:刷新地址栏,参数丢失 ...

  6. P1452 Beauty Contes（旋转卡壳版）

    题目背景 此处省略1W字^ ^ 题目描述 贝茜在牛的选美比赛中赢得了冠军”牛世界小姐”.因此,贝西会参观N(2 < = N < = 50000)个农场来传播善意.世界将被表示成一个二维平面 ...

  7. Android Gallery和ImageSwitcher同步自动(滚动)播放图片库

    本文主要内容是如何让Gallery和ImageSwitcher控件能够同步自动播放图片集 ,看起来较难,然而,实现的方法非常简单, 请跟我慢慢来.总的来说,本文要实现的效果如下图:(截图效果不怎么好) ...

  8. ReactiveCocoa 中 RACSignal 是如何发送信号的

    https://juejin.im/post/5829f4c3570c350063c436ac 前言 ReactiveCocoa是一个(第一个?)将函数响应式编程范例带入Objective-C的开源库 ...

  9. 利用第三方类 phpmailer 发邮件

    第一.百度一下 phpmailer 随便找个 girhub 网站 download 下来即可. 第二.复制如下代码放在项目根目录,填写完整你的账号信息,即可发送邮件.就是这么简单! <?php ...

  10. Python爬虫基础示例

    使用pip安装相关依赖: pip install requests pip install bs4 安装成功提示:Successfully installed *... 爬取中国天气网数据示例代码: ...