CSS突破局限制作框列表效果

2020-03-24 16:46:58

字體：大中小

來源：轉載

供稿：網友

今天要說的是，突破局限！
先給大家看看一個效果
效果圖

估計許多同學看到了，會想邊框是用圖片做出來的吧！
其實那是用了一個H3和一個DIV就可以層疊出以上效果

首先：
1.把背景設置為黑色

body{
background:#000;
color:#fff;
}

2. 寫一個DIV框
div {
width:400px;
height:200px;
margin:50px auto;
border:1px solid #fff;
}

3.在DIV框中，嵌套一個H3標簽
div
h3 /h3
/div

h3 我們給它一個寬度 100像素高度 30像素
讓他的邊框是白色

4.突破局限使用position屬性
此時 H3標簽已經被DIV包含了，并且靠頂部左邊位置
下來，我們對它進行定位顯示
估計許多學員會問，DIV包含了 H3 標簽，那么會h3能顯示的范圍也就只能在DIV區域內。
果真是這樣嗎？我們給H3標簽賦予position屬性，值設置relative 讓它相對定位
那么我們就可以用Left right top bottom 等屬性來對它定位了
因為、H3默認已經靠頂部了，我們希望他越出DIV邊界再往上一點
那么我們可以給他設置一個
top:-15px;
這個屬性即可，
這樣，這樣好H3標簽有正好居中壓線

當然，TOP的值你可以給-30甚至更高自定義

如果發現透過H3標簽顯示DIV的邊框，
可以給H3標簽設置一個與背景一樣的顏色，
這樣就會蓋過被壓住部分DIV上邊框了

效果就這樣做完了

html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title 淺談CSS突破局限 /title
style type="text/css"
ul {
list-style:none;
margin-top:0px;
width:300px;
position:relative;
top:-20px;
}
li {
border-bottom:1px dashed #ccc;
margin-top:10px;
}
body{
background:#000;
color:#fff;
}
div {
width:400px;
height:200px;
margin:50px auto;
border:1px solid #fff;
}
h3 {
width:100px;
height:30px;
line-height:30px;
text-align:center;
border:1px solid #fff;
position:relative;
top:-15px;
background:#000;
left:20px;
}
/style
/head
body
div
h3 熱點新聞 /h3
ul
li 突破局限CSS突破局限CSS /li
li 突破局限CSS突破局限CSS /li
li 突破局限CS突破局限CSSS /li
li 突破局限CSS突破局限CSS /li
li 突破局限CSS突破局限CSS /li
li 突破局限CS突破局限CSS /li
/ul
/div
div
h3 /h3
/div
/body
/html

提示：CSS提供了使用負數作為屬性值
通過給負數值我們可以做出意想不到的效果
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：CSS濾鏡-blur屬性

下一篇：CSS實現立體按鈕效果