多重边框 box-shadow

作者: 喜宝小窝儿 | 来源:发表于2018-12-18 10:17 被阅读0次

基本用法：

{

width:300px;

height:100px;

background-color:#ff9900;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;（水平距离、垂直距离、模糊距离、颜色）

}

效果图：

代码：box-shadow: 0 0 0 10px #888888;

效果图：

特点：支持逗号分隔语法，可创建任意数量的投影,甚至可以加常规投影。

代码：box-shadow: 0 0 0 10px #888888,

0 0 0 15px pink,

0 0 0 20px red;

效果图：

注意：投影产生的边框不影响布局，但可通过内边距或外边距模拟投影所需要的占据的空间。

《css-secrets》-demo：多重边框
《css-secrets》多重边框关键字：边框;box-shadow;outline 需求描述实现如下多重边...
内凹圆实战（border，box-shadow，outline）
border，box-shadow，outline 上述内容的代码多重边框实际工作中可能会有需要多重边框的场景...
css 中多种边框的实现小窍门
一、多重边框[1] 背景知识：box-shadow，outline鉴于使用场景的多元化，多重边框的设计越来越多，以...
【CSS】多重边框
要设置多重边框，最要用到的是box-shadow这个样式。 box-shadow 的作用是添加投影。如果要设置多...
day02
1.边框内圆角（需要掌握知识：box-shadow，outline，多重边框）方案一（用两个标签） html c...
多重边框 box-shadow
基本用法： { width:300px; height:100px; background-color:#ff99...
前端的一些小技巧汇总
多重边框. 利用重复指定box-shadow来达到多个边框的效果简单的文本模糊编辑任意页面打开浏览器控制台,...
CSS3边框、背景、文本效果、字体
CSS3边框圆角边框：border-radius 边框阴影：box-shadow语法：box-shadow: h...
box-shadow设置多重边框
CSS3
边框 border-radius - 圆角边框 box-shadow - 边框阴影 border-image - ...