CSS3的box-shadow怎麼使用-css教學-PHP中文網

CSS3的box-shadow怎麼使用

php中世界最好的语言

發布： 2017-11-24 09:22:20

原創

1891 人瀏覽過

我們知道在CSS3中box-shadow是盒子陰影樣式單詞，那我們今天就來看一下box-shadow是如何使用的，下面給大家帶來一個小案列

盒子陰影樣式字：box-shadow

語法

div{box-shadow:0 0 1px #000 inset;}

代表邊框間距靠左0靠上0 和1px陰影範圍陰影顏色為黑色（#000），有inset 代錶框內陰影，不含inset 代錶框外陰影。

注意：

box-shadow:0px 0px 1px #000

第1個值為0時，代表左右邊框陰影為1px範圍

第1個值為正整數代表左邊框陰影

第1個值為負整數代表右邊框陰影

同理

#第2個值為0 代表上下邊框陰影

第2個值為正整數代表1px陰影距離上邊框多少

第1個值為負整數代表下邊框陰影設定

#分別對DIV盒子和圖片IMG設定內陰影和外陰影為案例。

1、案例HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>对象阴影 在线演示 </title> 
<link href="images/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div>盒子对象阴影测试</div> 
<div class="box">DIV盒子内阴影</div> 
<div>图片对象阴影测试</div> 
<div class="box2"><img src="images/div-logo.gif" /></div> 
</body> 
</html>

登入後複製

2、案例CSS代碼

.box {box-shadow:5px 2px 6px #000 inset; width:300px; height:80px; margin:0 auto} 
.box2 img {box-shadow:5px 2px 6px #000}

登入後複製

CSS3中的box-shadow用法就這麼多了，更多精彩請關注php中文網其它相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

CSS3的box-shadow怎麼使用