css如何設定標題陰影邊框
- 奋力向前原創
- 2021-09-09 11:33:074334瀏覽
方法：1、利用border屬性為標題元素添加邊框，語法「border:寬度樣式顏色;」；2、利用「text-align: center」實現標題文字居中；3、使用box-shadow屬性為標題元素的邊框新增陰影效果。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css如何設定標題陰影邊框？
我們來講一下css如何標題新增陰影邊框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:200px;
height:200px;
border:2px solid red;
text-align: center;
margin: 20px auto;
line-height: 200px;
box-shadow: red 10px 30px 5px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>程式碼效果
css陰影邊框使用語法：
屬性：box-shadow
使用方法：div{box-shadow: 001px #000inset;}
陰影使用方法分析：第一個零代表距離物件左邊距離為0，並且開始顯示陰影，第二個零表示距離物件上間距物件為0，就開始顯示陰影，1px表示陰影的範圍1px，#000代表著陰影的顏色，inset表示物件內陰影，物件外就不設定陰影。
相容問題：火狐瀏覽器3.5版本和Google都是可以支援box-shadow屬性。
推薦學習：CSS影片教學
#以上是css如何設定標題陰影邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css怎麼給文字加背景下一篇：css怎麼給文字加背景