css3邊框陰影效果怎麼做？ （圖文+影片）
- 藏色散人原創
- 2018-09-27 15:20:157020瀏覽
本篇文章主要介紹css3邊框陰影效果的具體實作方法詳解。
我們在網頁設計中，通常會使用ps工具來達到圖片或邊框陰影、立體等效果。但如果有些基礎效果都需要用p圖來完成那就顯得效率比較低了。
下面我們要跟大家介紹css3中邊框陰影屬性的box-shadow，利用這個屬性我們就可以輕鬆地實現邊框陰影效果。
css3邊框陰影程式碼範例如下：
一、box-shadow屬性實作邊框外陰影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3边框阴影</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
div{margin: 20px 0px;
width: 100%;
height: 40px;
background: #fff;
box-shadow:5px 5px 10px 5px #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>此段HTML程式碼中，我們為div添加了一個box-shadow的樣式屬性，參數分別設定為5px 5px 10px 5px #ccc。
第一個參數表示水平方向陰影位置；
第二個參數表示垂直方向陰影位置；
第三個參數表示模糊距離；
第四個參數表示陰影的尺寸；
第五個參數表示陰影的顏色；
第六個參數沒有設置，預設為外陰影。
那麼上述程式碼最終效果如下圖：
#如圖我們給這個div成功設定了邊框外陰影。
附註：box-shadow 屬性在框框中新增一個或多個陰影。
box-shadow屬性中參數分別表示水平方向陰影位置，垂直方向陰影位置，模糊距離，陰影的尺寸，陰影的顏色，內外陰影（預設為外），設定內陰影（inset）。
二、box-shadow屬性實作邊框內陰影
在上述HTML程式碼的基礎上，我們將box-shadow樣式屬性的值做一些變更：
box-shadow:5px 5px 10px 5px #ccc inset;
效果如下圖：
如圖我們為div設定了邊框內陰影效果。
三、box-shadow屬性實作圓柱形效果
box-shadow:0px 5px 10px 10px #ccc inset;
這裡我們將水平方向陰影位置設定為0個像素點並且設定內陰影。
最終效果如下圖：
如圖div顯示出圓柱形的效果。
註：box-shadow屬性中，前兩個參數可以是負值且必須存在，而後面的參數則都是可選的。
這篇文章就是關於css3邊框陰影效果的具體實作方法介紹，非常淺顯易懂，希望對需要的朋友有所幫助！
以上是css3邊框陰影效果怎麼做？ （圖文+影片）的詳細內容。更多資訊請關注PHP中文網其他相關文章！