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实现立体按钮效果