css如何實現單邊陰影效果
- 藏色散人原創
- 2018-11-12 17:28:0311974瀏覽
本篇文章主要介紹HTML/css單邊陰影的具體實作方法。
對於HTML/css的初學者來說，邊框陰影效果，想必大家都有一定的了解。適當的使用單邊陰影效果可以讓我們的網頁內容更顯豐富、更美觀。那麼在之前的文章中，也有跟大家介紹過css3邊框陰影效果的實作方法。
推薦參考學習：《CSS教學》
本節內容我們再詳細的跟大家介紹html/css單邊框陰影效果的實作！
html/css實作單邊框陰影的程式碼範例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML/css实现单边框阴影实例</title>
</head>
<style type="text/css">
.box-shadow {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid #ccc;
margin: 20px;
}
.top {
box-shadow: 0 -2px 0 red;
}
.right {
box-shadow: 2px 0 0 green;
}
.bottom {
box-shadow: 0 2px 0 blue;
}
.left {
box-shadow: -2px 0 0 orange;
}
</style>
<body>
<div class="box-shadow top"></div>
<div class="box-shadow right"></div>
<div class="box-shadow bottom"></div>
<div class="box-shadow left"></div>
</body>
</html>前台存取效果如下：
##1.上邊框陰影：
2.右邊框陰影：
3 .下邊框陰影效果：
4.左邊框陰影效果：
四周單邊框陰影效果分別顯示如上圖。
那麼實作邊框陰影，主要用到的樣式屬性就是：box-shadow 屬性，表示要將一個或多個陰影新增到框。
其中第一個參數表示水平陰影的位置、第二個參數表示垂直陰影的位置、第三個參數表示模糊的距離，第四個參數則是陰影的顏色。 附註：boxShadow 屬性把一個或多個下拉陰影加到框框上。此屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。 這篇文章就是關於html/css實現單邊框陰影效果的方法介紹，非常簡單易懂，希望對需要的朋友有一定的幫助！以上是css如何實現單邊陰影效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn