<!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. 表达式中含or的赋值

    or用在赋值表达式的时候,不是返回bool值,而是按以下的情况赋值 如果左侧的表达式估值为True,则返回左侧表达式 否则返回右侧表达式 例子: insignificance = 3 or 1 pri ...

  2. pandas学习笔记 - 常见的数据处理方式

    1.缺失值处理 - 拉格朗日插值法 input_file数据文件内容(存在部分缺失值): from scipy.interpolate import lagrange import pandas as ...

  3. Spring 整合Shiro：记住我

    1.登录方法 /** * 执行登录操作 * * @param username * @param password * @param rememberMe * @param model * @retu ...

  4. poj 2337 Catenyms 【欧拉路径】

    题目链接:http://poj.org/problem?id=2337 题意:给定一些单词,假设一个单词的尾字母与还有一个的首字母同样则能够连接.问能否够每一个单词用一次,将全部单词连接,能够则输出字 ...

  5. [Javascript] Simplify Creating Immutable Data Trees With Immer

    Immer is a tiny library that makes it possible to work with immutable data in JavaScript in a much m ...

  6. hdu 2037 贪心

    今年暑假不AC Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  7. Linux下安装Mysql（RPM安装）

    一.去官网下载本次安装须要的mysql版本号.我们须要安装的是5.1版本号的且centos系统是64位的.所下面载的是MySQL-community-5.1.73-1.rhel5.x86_64.rpm ...

  8. vim 插件之vim-trailing-whitespace

    vim-trailing-whitespace 这个插件是快速去掉文章行末的空格 地址 http://github.com/bronson/vim-trailing-whitespace 如果你想要使 ...

  9. poj--2385--Apple Catching（状态dp）

    Apple Catching Time Limit: 1000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submi ...

  10. Car Talk1

    This question is based on a Puzzler that was broadcast on the radioprogram Car Talk1: “I was driving ...