第二章 Background & Borders 之 Multiple borders
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的更多相关文章
- jquery 第二章
1.本章目标 css样式 选择器2.css样式 宽.高.边框.背景颜色.字体....... <html> <head> <style> div{ ...
- C# Language Specification 5.0 (翻译)第二章 词法结构
程序 C# 程序(program)由至少一个源文件(source files)组成,其正式称谓为编译单元(compilation units)[1].每个源文件都是有序的 Unicode 字符序列.源 ...
- AS开发实战第二章学习笔记——其他
第二章学习笔记(1.19-1.22)像素Android支持的像素单位主要有px(像素).in(英寸).mm(毫米).pt(磅,1/72英寸).dp(与设备无关的显示单位).dip(就是dp).sp(用 ...
- CSS+DIV网页样式与布局:第二章:CSS的基本语法
第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
- 第二章 TCP/IP 基础知识
第二章 TCP/IP 基础知识 TCP/IP transmission control protocol and ip internet protocol 是互联网众多通信协议中最为著名的. ...
- 8. [mmc subsystem] host(第二章)——sdhci
一.sdhci core说明 1.sdhci说明 具体参考<host(第一章)--概述> SDHC:Secure Digital(SD) Host Controller,是指一套sd ho ...
- HttpClient学习研究---第二章:连接管理
第二章.Connection management连接管理2.1. 2.1.Connection persistence连接持久性The process of establishing a conne ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 《Django By Example》第二章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译完第一章后,发现翻译第二章的速 ...
随机推荐
- openNebula Image上传
Rack:ruby webserver框架 https://rack.github.io/ 文件上传使用基于tempfile 库 文件上传要经历两个过程: 1.上传文件传到opennebule sun ...
- cocos2d制作动态光晕效果基础——blendFunc
转自:http://www.2cto.com/kf/201207/144191.html 最近的项目要求动态光晕的效果. 何谓动态光晕?之前不知道别人怎么称呼这个效果, 不过在我看来,“动态光晕”这个 ...
- 做什么都要坚持,写blog也一样,
2015年一篇文章没写,惭愧,时间过的真快 好习惯要坚持,
- iOS中CollectionView由于多次点击造成错误的解决方案
iOS中CollectionCiew由于多次点击,会给程序造成错误. 这个时候,我们可以用过手势类来进行判断和过滤. 但是,有一个快捷的解决方法,那就是给用户响应增加延时操作. 具体代码如下: [co ...
- Codeforces Round #290 (Div. 2) A. Fox And Snake 水题
A. Fox And Snake 题目连接: http://codeforces.com/contest/510/problem/A Description Fox Ciel starts to le ...
- C#中Thread类中Join方法的理解(转载)
指在一线程里面调用另一线程join方法时,表示将本线程阻塞直至另一线程终止时再执行 比如 using System; namespace TestThreadJoin { class Pro ...
- HTML 转义符
特殊字符 字符 十进制 转义字符 “ " " & & & < < < > > > 不断开空格(non-breaking ...
- eclipse内存溢出报错:java.lang.OutOfMemoryError:Java heap space
今天执行了一个比較大的程序,处理的数据达到126MB数据,将数据导入数据库中,用eclipse 来訪问时候,总是出现java.lang.OutOfMemoryError:Java heap space ...
- ProgressCircular
https://github.com/eltld/ProgressCircular
- Android开发 Unity3D基础 Android Development
开发环境 Window 7 Unity3D 3.3.0 MB525 defy Android 2.1-update1 本次学习: 1.认识Unity 2.Unity3D环境搭建与Android软件生成 ...