box-shadow和outline

作者: LorryZ | 来源:发表于2017-03-10 22:28 被阅读0次

http://dabblet.com/gist/525eb8e9cdade71723c1

可以利用box-shadow创建多层边框，

box-shadow:0 0 0 15px #655, //第一层边框

0 0 0 25px deeppink, //第二层边框

0 2px 5px 25px rgba(0,0,0,.6); //在最外层增加阴影

background:yellowgreen;

border:10px solid #655;

outline:5px solid deeppink;//用一层Border一层outline可以实现相同的效果

其中如果设定outline-offset属性，可以设定简单的描边效果，

background:yellowgreen;

outline:1px dashed deeppink;

outline-offset:-10px; //内部描边效果

box-shadow和outline
http://dabblet.com/gist/525eb8e9cdade71723c1 可以利用box-shad...
css 制作小图标
1. outline 制作方块和加号 outline 不占空间, 像 box-shadow, border-rad...
纯CSS3如何实现圆角的outline效果？
box-shadow模拟outline的圆角效果我们平时使用box-shadow最多的是前面3个参数，水平/垂直偏...
《css-secrets》-demo：多重边框
《css-secrets》多重边框关键字：边框;box-shadow;outline 需求描述实现如下多重边...
关于给元素点击时加边框，元素会抖动的解决办法
1、如果你是四个方向都会加边框，可使用： outline: 1px solid #eee; box-shadow:...
内凹圆实战（border，box-shadow，outline）
border，box-shadow，outline 上述内容的代码多重边框实际工作中可能会有需要多重边框的场景...
双边框效果
用纯css实现某个元素的双边框效果，边框大小都为5，如图用box-shadow或outline Box-shad...
day02
1.边框内圆角（需要掌握知识：box-shadow，outline，多重边框）方案一（用两个标签） html c...
2-4 内圆角
知识储备 1.2-3节的box-shadow以及outline 测试需要实现的效果图解法一：示例代码1html...
css 中多种边框的实现小窍门
一、多重边框[1] 背景知识：box-shadow，outline鉴于使用场景的多元化，多重边框的设计越来越多，以...