首頁 > web前端 > css教學 > css如何設定標題陰影邊框

css如何設定標題陰影邊框

奋力向前
發布: 2023-01-07 11:47:43
原創
4369 人瀏覽過

方法:1、利用border屬性為標題元素添加邊框,語法「border:寬度樣式顏色;」;2、利用「text-align: center」實現標題文字居中;3、使用box-shadow屬性為標題元素的邊框新增陰影效果。

css如何設定標題陰影邊框

本教學操作環境: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如何設定標題陰影邊框

css陰影邊框使用語法:

屬性:box-shadow

使用方法:div{box-shadow: 001px #000inset;}

陰影使用方法分析:第一個零代表距離物件左邊距離為0,並且開始顯示陰影,第二個零表示距離物件上間距物件為0,就開始顯示陰影,1px表示陰影的範圍1px#000代表著陰影的顏色,inset表示物件內陰影,物件外就不設定陰影。

相容問題:火狐瀏覽器3.5版本和Google都是可以支援box-shadow屬性。

推薦學習:CSS影片教學

#

以上是css如何設定標題陰影邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板