<!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. Qt之自定义布局管理器（QFlowLayout）

    简述 QFlowLayout,顾名思义-流布局,实现了处理不同窗口大小的布局.根据应用窗口的宽度来进行控件放置的变化. 具体实现要求不再赘述,请参考前两节内容. 简述 实现 效果 源码 实现 QFlo ...

  2. 实验了一下对于struct引用的成员的改动

    今天写代码的时候,不确定struct用引用传递给函数的时候,他的成员在函数里面改变的时候,是否能影响到外面. 实验了一下 #include <stdio.h> #include <s ...

  3. 【HDU-4614】Vases and Flowers（线段树双查询）

    11946317 2014-10-23 09:08:28 Accepted 4614 437MS 2348K rid=11946317" target="_blank" ...

  4. linux程序设计——个人总结

    linux程序设计--个人总结 到今天为止,<linux程序设计>学习基本完毕了.从五月下旬開始接触linux,学习安装Ubuntu14.04,六月份開始学习<linux程序设计&g ...

  5. matlab subplot（figure）如何设置使得图像最终显示出来不一样大小

    1. 问题描述 figure subplot(1, 2, 1), imshow(A) subplot(1, 2, 2), imshow(B) 无论 A 和 B 的 size 是否一致,最终显示出来的 ...

  6. Codeforces 708D 费用流 （呃我们的考试题）

    NB的题目背景 输入输出一样 考试的时候貌似只有gzz一个人搞出来了 %gzz 思路: 分情况讨论 add(x,y,C,E) C是费用 E是流量 1. f>c add(x,y,2,inf),ad ...

  7. Where to Store your JWTs – Cookies vs HTML5 Web Storage--转

    原文地址:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Update 5/12/20 ...

  8. VS10的一个问题

    今天遇到一个问题,LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏.转一下网上的解决办法http://bbs.csdn.net/topics/390 ...

  9. Android中的Junit测试

    在开发中Junit测试可以很方便的帮助开者尽可能早的发现并处理问题,而且使用也非常简单,只需要导入Junit测试相关的jar包并创建测试类,就可以对业务功能进行测试,而不用为了测试在代码中添加输出语句 ...

  10. vue-router路由配置

    转自http://www.cnblogs.com/padding1015/ 两种配置方法:在main.js中 || 在src/router文件夹下的index.js中 src/router/index ...