<!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. Python实现机器人语音聊天

    一.前言说明 1.功能简述 登录后进入聊天界面,如果服务器都在同一个地址,则都进入同一个房间 进入/离开/发消息同一房间用户都可以看到,输入“tuling”或“chatbot”可以切换为和Tuling ...

  2. SQL 字符串操作函数

    SQL 字符串操作函数 学习了: https://www.cnblogs.com/wangzhe688/p/6046654.html 一.字符转换函数 1.ASCII() 返回字符表达式最左端字符的A ...

  3. 零基础学python-6.2 共享引用

    这一章节说说共享引用 我们先举一个样例 a=1 b=a 上面的样例就是共享引用,这里我们说说整个过程: 1.创建一个对象1 2.创建一个变量a 3.把a和1所在的内存空间连接起来.就是a引用1 4.a ...

  4. maven3+eclipse搭建webAPP企业级实战《一》

    想做企业级web系统:环境搭建不可缺少GO 1:新建 2:next : 3:选择webAPP next: 填完finish 初始项目结构: watermark/2/text/aHR0cDovL2Jsb ...

  5. bzoj1801: [Ahoi2009]chess 中国象棋（DP）

    1801: [Ahoi2009]chess 中国象棋 题目:传送门 题解: 表示自己的DP菜的抠脚 %题解... 定义f[i][j][k]表示前i行 仅有一个棋子的有j列 有两个棋子的有k个 的方案数 ...

  6. nyoj--767--因子和（模拟）

    因子和 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描述 题目很简单明了,给你一个数n,判断它是不是素数,如果是素数就输出"Yes",如果不是素数则输出 ...

  7. BZOJ 3600 替罪羊树+线段树

    思路: 当然是抄的黄学长的题解啦 //By SiriusRen #include <cstdio> #include <algorithm> using namespace s ...

  8. HBase框架基础（四）

    * HBase框架基础(四) 上一节我们介绍了如何使用HBase搞一些MapReduce小程序,其主要作用呢是可以做一些数据清洗和分析或者导入数据的工作,这一节我们来介绍如何使用HBase与其他框架进 ...

  9. 高德地图和canvas画图结合应用(二)

    上节讲述了如在在高德地图中添加canvas图层,这节就讲述下如何在canvas图层添加鼠标的事件. 在上节脚本的最后加入以下代码: var text; $('#container').on('clic ...

  10. js相关禁止

    遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择“图片另存为”或“复制”来达到我们的目的.但是,目前有许多网页都屏蔽了鼠标右键,那么用js如何实现禁止鼠标右 ...