css奇技淫巧—box-shadow与outline绘制多重边框效果
css语法：
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
| 值 | 描述 | 测试 |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | 测试 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | 测试 |
| blur | 可选。模糊距离。 | 测试 |
| spread | 可选。阴影的尺寸。 | 测试 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | 测试 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 | 测试 |
js语法：
object.style.boxShadow="10px 10px 5px #888888"
浏览器支持：
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
实例：
利用box-shadow绘制多重边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
box-shadow:0 0 0 5px #000 inset,0 0 0 10px #f0f inset,0 0 0 20px #ff0 inset;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
效果：http://sandbox.runjs.cn/show/rzwsnqrz
设置inset主要是为了两个div之前的间隔，避免边框（阴影）被挡住。并且所有的边框（阴影）都有圆角：
给div1加上：
border-radius:30px;
变成了这样：
效果：http://sandbox.runjs.cn/show/dlbe8rod
还有一种绘制两重边框的效果（利用outline）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>outline</title>
<style type="text/css">
.div1{
width:100px;
height:100px;
margin:50px auto;
border:5px solid #000;
outline:10px solid #0f0;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
效果：http://sandbox.runjs.cn/show/wfw5jdu5
这种方法只能绘制出两重边框，并且有个缺点：outline不能圆角！！,仅火狐支持：
-Moz-outline-radius:30px;
给div1加上属性：
border-radius:30px;
变成了这样：
效果：http://sandbox.runjs.cn/show/httheoha
css奇技淫巧—box-shadow与outline绘制多重边框效果的更多相关文章
- css border 三角形阴影(不规则图形阴影) & 多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...
- [css 揭秘]：CSS揭秘 技巧（二）：多重边框
我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...
- [css]《css揭秘》学习（二）-多重边框
一.box-shadow属性 box-shadow除了生成投影,还可以用来生成边框:它接受第4个值作为扩张半径,0的x轴偏移+0的y轴偏移+0的模糊值+0的扩张半径,得到的显示效果和边框是一样的:但是 ...
- CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果
本文将介绍一个小技巧,通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果. 起因 一日,一群友私聊问我.如何使用 CSS 实现下述效果,一个文字的波浪效果: 我当时想都没想,就回 ...
- 【基础】CSS实现多重边框的5种方式
简言 目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案.本文简要地列举了几种多重边框的实现方案,大家可以根据项目实际及兼容性要求 ...
- CSS如何实现圆角的outline效果？
一.首先,outline是个很牛逼的东西 温故而知鑫,10年的时候写过一篇可用性方面的文章:“页面可用性之outline轮廓外框的一些研究”,还算挺有用的:3年之后,也就是13年,介绍了个没什么使用价 ...
- border三角形阴影(不规则图形阴影)和多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. border的组合写法 border:border-width border-style borde ...
- CSS 奇技淫巧十八招
http://www.tuicool.com/articles/VZneI3 開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從 ...
- css多重边框
一.使用box-shadow实现多重边框 html <div class="multiple"></div> css .multiple{ backgrou ...
随机推荐
- [原]NYOJ-字符串替换-113
大学生程序代写 /*http://acm.nyist.net/JudgeOnline/problem.php?pid=113 字符串替换 时间限制:3000 ms | 内存限制:65535 KB ...
- [转]PNG8和PNG24的区别
首先我们要知道: 1.png8和png24的根本区别,不是颜色位的区别,而是存储方式不同. 2.png8有1位的布尔透明通道(要么完全透明,要么完全不透明),png24则有8位(256阶)的布尔透明通 ...
- Operating System-进程/线程内部通信-竞争条件（Race Conditions）
从本文开始介绍进程间的通信,进程间通信遇到的问题以及方式其实和线程之间通信是一致的,所以进程间通信的所有理论知识都可以用在线程上,接下来的系列文章都会以进程之间的通信为模版进行介绍,本文主要内容: 进 ...
- 【转】 Pro Android学习笔记（七一）：HTTP服务（5）：多线程调用HttpClient
目录(?)[-] 应用共享HttpClient对象的同步问题 创建共享HttpClient代码 创建共享对象 创建可共享的HttpClient对象 使用共享HttpClient对象的代码 基础代码 修 ...
- java代码throws异常
总结:抛出异常 package com.ds; //异常捕获 public class fdsg { private static void throwException() { try { Stri ...
- keepalived+redis 高可用redis主从解决方案
背景介绍: 目前,Redis还没有一个类似于MySQL Proxy或Oracle RAC的官方HA方案.#Redis 2.8版开始正式提供名为Sentinel的主从切换方案(后面附上,未测试) 因此, ...
- ruby中特殊的全局变量
全局变量:由$开头,可以在程序的任何位置访问到.在初始化前,全局变量有一个特殊的值 nil. 这里列出了一些以$打头并跟单个字符的特殊变量,包括主要的系统变量以及它们的含义: $! 最近一次的错误信息 ...
- SQL连接、嵌套和集合查询---
SQL连接.嵌套和集合查询 一:连接查询 1 .不同表之间的连接查询 例 查询每个学生及其选修课程的情况. 本查询实际上是涉及Students与Reports两个表的连接操作.这两个表之间的联系是通过 ...
- ASP.NET MVC 3:缓存功能的设计问题
今天这一篇文章我来谈一谈在MVC 3项目中的缓存功能,以及针对缓存的一些设计上的考量,给大家参考参考. 为什么需要讨论缓存?缓存是一个中大型系统所必须考虑的问题.为了避免每次请求都去访问后台的资源(例 ...
- 关于jquery登录的一些简单验证。
获取值之后的判断 $(function () { $("#btlogin").click(function () { var txtaccount = $("#txtac ...