2. Multiple Boerders 多边框

在工作中我们可能会遇到给盒子外层实现多个边框。如以下效果:

方法1:

实现这个效果,其实很简单,使用CSS3 的box-shadow属性,先看看box-shadow属性怎么使用吧。

box-shadow: h-shadow v-shadow blur spread color inset|outset / none/ inherit

h-shadow 相对盒子的水平偏移量

v-shadow 相对盒子的垂直偏移量

blur 模糊半径(阴影的宽度)

splread 扩展半径(阴影的扩展宽度)

inset/outset(默认) 内阴影还是外阴影

多边框的原理就是给盒子加上多个阴影。

如上图实现方法:

box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);

box-shadow 设置的三个阴影,由里到外。第一个阴影的半径为10px, 第二个阴影的半径为15px, 第三个阴影和第二个阴影重合了,用来设置阴影效果。

所以,值得注意的是,里面到外面的阴影是会覆盖外面的。这就是为什么第二个设置15px,而不是10px的原因。

方法2:

box-shadow的方法虽好,但并没有真正应用到border上,对盒子的大小没有影响。所以第二个方法是使用outline属性:

outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

outline: color style width / initial / inherit

如下图效果的代码,可以这样写:

.box{
width: 100px;
height: 80px;
background: #655;
border:2px dashed white;
outline: 15px solid #655;
outline-offset: 5px;
 }

  

但是outline 只适用于出现两个border的情况,而且也不适用于圆角的场景。 -_-

应用场景:制作以下图片中的原型边框可以使用box-shadow。

第二章 Background & Borders 之 Multiple borders的更多相关文章

  1. jquery 第二章

    1.本章目标    css样式    选择器2.css样式    宽.高.边框.背景颜色.字体....... <html> <head> <style> div{ ...

  2. C# Language Specification 5.0 (翻译)第二章 词法结构

    程序 C# 程序(program)由至少一个源文件(source files)组成,其正式称谓为编译单元(compilation units)[1].每个源文件都是有序的 Unicode 字符序列.源 ...

  3. AS开发实战第二章学习笔记——其他

    第二章学习笔记(1.19-1.22)像素Android支持的像素单位主要有px(像素).in(英寸).mm(毫米).pt(磅,1/72英寸).dp(与设备无关的显示单位).dip(就是dp).sp(用 ...

  4. CSS+DIV网页样式与布局:第二章:CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  5. 第二章 TCP/IP 基础知识

    第二章 TCP/IP 基础知识   TCP/IP  transmission control protocol and ip internet protocol 是互联网众多通信协议中最为著名的.   ...

  6. 8. [mmc subsystem] host(第二章)——sdhci

    一.sdhci core说明 1.sdhci说明 具体参考<host(第一章)--概述> SDHC:Secure Digital(SD) Host Controller,是指一套sd ho ...

  7. HttpClient学习研究---第二章:连接管理

    第二章.Connection management连接管理2.1. 2.1.Connection persistence连接持久性The process of establishing a conne ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 《Django By Example》第二章 中文 翻译 (个人学习,渣翻)

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译完第一章后,发现翻译第二章的速 ...

随机推荐

  1. ps:探索按钮按起落下的技巧

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-07-10) 先上图: 那个看上去想按下去的,那个看上去像自然地呢? 显而易见: 第一像按下去的,第二个像自然地. 原因: 渐变: ...

  2. wikioi 1010 过河卒

    题目描述 Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如上图的C点),该马所在的点和所有跳跃一步可达的点 ...

  3. C#高性能大容量SOCKET并发(一):IOCP完成端口例子介绍(转)

    原文地址 http://blog.csdn.net/SQLDebug_Fan/article/details/17556353 例子主要包括SocketAsyncEventArgs通讯封装.服务端实现 ...

  4. 【C#】工具类-FTP操作封装类FTPHelper

    转载:http://blog.csdn.net/gdjlc/article/details/11968477 using System; using System.Collections.Generi ...

  5. udt nat traverse

    https://github.com/bakwc/udt-nat-traverse Example of nat traversal using udt library. UDT is a udp b ...

  6. poj3250 Bad Hair Day

    Description Some of Farmer John's N cows (1 ≤ N ≤ 80,000) are having a bad hair day! Since each cow ...

  7. SharePoint 2013 中使用 JavaScript Like 和Unlike list item/page/document

    SharePoint 2013中新增了很多社交功能,比如用户可以like/unlike 任何一个 list item/page/document,这是一个非常不错的功能. 但有时觉得like/unli ...

  8. openlayers3 在地图上叠加WFS查询矢量图层

    随着终端设备计算能力的加强,用户在使用地图的时候也须要越来越多的交互效果. 比方如今非常火的室内导航,为了获得好的用户体验,就须要当用户单击某一商店的时候该商店的颜色能对应的变化.这就须要叠加矢量图层 ...

  9. [AngularJS] Best Practise - Module

    Module definitions Angular modules can be declared in various ways, either stored in a variable or u ...

  10. 在Swift中的ASCII到字符转换的问题

    我们在C++里处理字符通常是这样的 char a = 'A' // A = 65 printf("'%c' = %d", a + 1, a + 1) // 'B' = 66 这在号 ...