css-box-shadow屬性與運用

CSS3 的 box-shadow 屬性用來建立陰影效果，在平面增加出空間感。

資料來源：

清屏網-box-shadow屬性
 網頁藝術思考-css box-shadow 產生陰影效果或光暈效果的特性

基本運用

box-shadow 屬性值由六部分組成

共有 6 個特性值，每個值之間以至少一個半形空格間隔。預設值為 none (只有一個字) 。
前面 4 個都是尺寸值 (length，不接受 %) ，
依序表示水平位移距離 (x) 、垂直位移距離 (y) 、模糊強度 (blur) 、擴散強度 (spread) ，不可被其它的值插進其間。
產生陰影，前 2 個位移值 (x y) 為必要值，必須指定；其餘的值可不定義。
模糊 (blur) 及擴散 (spread) 強度預設值 (沒有定義時) 一般為 0 。模糊不能為負值。
第 5 個可指定陰影顏色 (color) ， css 合法的顏色值表示法都可以，顏色值放在位移值前面也可以。沒有定義會使用 (或繼承) color 特性指定的顏色值。
第 6 個可指定為內陰影 (inset) ，改放在第 1 個位置也可以。沒有定義就是一般在外的陰影。
所有組合起來的值，可增加為多組，以 , (逗號) 分隔，依序表示由前至後堆疊的多層陰影。
不被繼承。

box-shadow: offset-x offset-y blur spread color inset;

1	box-shadow: offset-x offset-y blur spread color inset;

組合起來

用 box-shadow 模擬邊框，不會影響盒模型以及頁面其餘部分的佈局。利用多重陰影，可以使元素有不同顏色的邊框。

body{text-align: center;}
.box{
	width: 150px; height: 150px;
	background-color: orange; 
	display: inline-block; 
	margin: 50px;
}
.simple {
	box-shadow: 0px 0px 0px 40px indianred;
}
.multiple {
	box-shadow: 
	20px 20px 0px 20px lightcoral,
	-20px -20px 0px 20px mediumvioletred,
	0px 0px 0px 40px rgb(200,200,200);
}

body{text-align: center;}

.box{

width: 150px; height: 150px;

background-color: orange;

display: inline-block;

margin: 50px;

}

.simple {

box-shadow: 0px 0px 0px 40px indianred;

}

.multiple {

box-shadow:

20px 20px 0px 20px lightcoral,

-20px -20px 0px 20px mediumvioletred,

0px 0px 0px 40px rgb(200,200,200);

}

See the Pen css-box-shadow屬性與運用-Non-Layout-Blocking 邊框的另一種選擇 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

pop-up 效果

box-shadow (& transform ) 屬性進行變換，可以模擬元素靠近和遠離用戶的效果

.popup {
	transform: scale(1);
	box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
	transform: scale(1.3);
	box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.5s, transform 0.5s;
}

.popup {

transform: scale(1);

box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);

transition: box-shadow 0.5s, transform 0.5s;

}

.popup:hover {

transform: scale(1.3);

box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);

transition: box-shadow 0.5s, transform 0.5s;

}

See the Pen pop-up 效果-box-shadow (& transform ) 屬性進行變換，可以模擬元素靠近和遠離用戶的效果 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

floating 效果

給 :after 偽元素添加 box-shadow 。在元素下方創建陰影，來模擬升起和下降。

.floating {
	position: relative;

	transform: translateY(0);
	transition: transform 1s;
}
.floating:after {
content: "";
	display: block;
	position: absolute;
	bottom: -30px;
	left: 50%;
	height: 8px;
	width: 100%;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.2);

	transform: translate(-50%, 0);
	transition: transform 1s;
}

/* Hover States */
.floating:hover {
	transform: translateY(-40px);
	transition: transform 1s;
}
.floating:hover:after {
	transform: translate(-50%, 40px) scale(0.75);
	transition: transform 1s;
}

.floating {

position: relative;

transform: translateY(0);

transition: transform 1s;

}

.floating:after {

content: "";

display: block;

position: absolute;

bottom: -30px;

left: 50%;

height: 8px;

width: 100%;

box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);

border-radius: 50%;

background-color: rgba(0, 0, 0, 0.2);

transform: translate(-50%, 0);

transition: transform 1s;

}

/* Hover States */

.floating:hover {

transform: translateY(-40px);

transition: transform 1s;

}

.floating:hover:after {

transform: translate(-50%, 40px) scale(0.75);

transition: transform 1s;

}

See the Pen BQqxrj by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

紙張效果

body {background:#ccc}

.box h3{
  text-align:center;
	position:relative;
	top:80px;
}
.box {
	width:70%;
	height:200px;
	background:#FFF;
	margin:40px auto;
}
/*==================================================
 * Effect 1
 * ===============================================*/
.effect1{
	-webkit-box-shadow: 0 10px 6px -6px #777;
	   -moz-box-shadow: 0 10px 6px -6px #777;
	        box-shadow: 0 10px 6px -6px #777;
}

/*==================================================
 * Effect 2
 * ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 3
 * ===============================================*/
.effect3
{
  position: relative;
}
.effect3:before
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*==================================================
 * Effect 4
 * ===============================================*/
.effect4
{
  position: relative;
}
.effect4:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  right: 10px;
  left: auto;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
}

/*==================================================
 * Effect 5
 * ===============================================*/
.effect5
{
  position: relative;
}
.effect5:before, .effect5:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.effect5:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/*==================================================
 * Effect 6
 * ===============================================*/
.effect6
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect6:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 7
 * ===============================================*/
.effect7
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect7:before, .effect7:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect7:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/*==================================================
 * Effect 8
 * ===============================================*/
.effect8
{
  	position:relative;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect8:before, .effect8:after
{
	content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.effect8:after
{
	right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

body {background:#ccc}

.box h3{

text-align:center;

position:relative;

top:80px;

}

.box {

width:70%;

height:200px;

background:#FFF;

margin:40px auto;

}

/*==================================================

* Effect 1

* ===============================================*/

.effect1{

-webkit-box-shadow: 0 10px 6px -6px #777;

-moz-box-shadow: 0 10px 6px -6px #777;

box-shadow: 0 10px 6px -6px #777;

}

/*==================================================

* Effect 2

* ===============================================*/

.effect2

{

position: relative;

}

.effect2:before, .effect2:after

{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

-webkit-box-shadow: 0 15px 10px #777;

-moz-box-shadow: 0 15px 10px #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

.effect2:after

{

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

right: 10px;

left: auto;

}

/*==================================================

* Effect 3

* ===============================================*/

.effect3

{

position: relative;

}

.effect3:before

{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

-webkit-box-shadow: 0 15px 10px #777;

-moz-box-shadow: 0 15px 10px #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

/*==================================================

* Effect 4

* ===============================================*/

.effect4

{

position: relative;

}

.effect4:after

{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

right: 10px;

left: auto;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

-webkit-box-shadow: 0 15px 10px #777;

-moz-box-shadow: 0 15px 10px #777;

box-shadow: 0 15px 10px #777;

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

}

/*==================================================

* Effect 5

* ===============================================*/

.effect5

{

position: relative;

}

.effect5:before, .effect5:after

{

z-index: -1;

position: absolute;

content: "";

bottom: 25px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: #777;

-webkit-box-shadow: 0 35px 20px #777;

-moz-box-shadow: 0 35px 20px #777;

box-shadow: 0 35px 20px #777;

-webkit-transform: rotate(-8deg);

-moz-transform: rotate(-8deg);

-o-transform: rotate(-8deg);

-ms-transform: rotate(-8deg);

transform: rotate(-8deg);

}

.effect5:after

{

-webkit-transform: rotate(8deg);

-moz-transform: rotate(8deg);

-o-transform: rotate(8deg);

-ms-transform: rotate(8deg);

transform: rotate(8deg);

right: 10px;

left: auto;

}

/*==================================================

* Effect 6

* ===============================================*/

.effect6

{

position:relative;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.effect6:before, .effect6:after

{

content:"";

position:absolute;

z-index:-1;

-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:50%;

bottom:0;

left:10px;

right:10px;

-moz-border-radius:100px / 10px;

border-radius:100px / 10px;

}

.effect6:after

{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

/*==================================================

* Effect 7

* ===============================================*/

.effect7

{

position:relative;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.effect7:before, .effect7:after

{

content:"";

position:absolute;

z-index:-1;

-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:0;

bottom:0;

left:10px;

right:10px;

-moz-border-radius:100px / 10px;

border-radius:100px / 10px;

}

.effect7:after

{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

/*==================================================

* Effect 8

* ===============================================*/

.effect8

{

position:relative;

-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.effect8:before, .effect8:after

{

content:"";

position:absolute;

z-index:-1;

-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);

-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);

box-shadow:0 0 20px rgba(0,0,0,0.8);

top:10px;

bottom:10px;

left:0;

right:0;

-moz-border-radius:100px / 10px;

border-radius:100px / 10px;

}

.effect8:after

{

right:10px;

left:auto;

-webkit-transform:skew(8deg) rotate(3deg);

-moz-transform:skew(8deg) rotate(3deg);

-ms-transform:skew(8deg) rotate(3deg);

-o-transform:skew(8deg) rotate(3deg);

transform:skew(8deg) rotate(3deg);

}

See the Pen ss-box-shadow屬性與運用-紙張效果 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

標籤雲

文章段落

css-box-shadow屬性與運用

資料來源：

基本運用

組合起來

pop-up 效果

floating 效果

紙張效果

標籤雲

#ezw_tco-2 .ez-toc-title{ font-size: 120%; ; ; } #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 文章段落

資料來源：

基本運用

組合起來

pop-up 效果

floating 效果

紙張效果

文章段落