css 制造图片边框效果

最新推荐文章于 2024-07-26 08:00:00 发布

Blocksom

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量1k

点赞数

分类专栏： html 文章标签：制造 css class scroll border xhtml

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<style type="text/css">
.container {
    background: none repeat scroll 0 0 #F3F5FD;
    margin-bottom: 9px;
    padding: 2px;
    position: relative;
}
.container .inner {
    border: 1px solid #D3DCE5;
}
.container .inner-content {
    background: none repeat scroll 0 0 #FAFDFE;
    border: 1px solid #FFFFFF;
    overflow: hidden;
    padding: 14px 0 9px 8px;
}
.notice-list {
    padding: 8px 14px 0 8px;
}
ul {
    list-style: none outside none;
}
.notice-list li {
    background-position: 3px -289px;
    color: #424243;
    line-height: 18px;
    margin-bottom: 20px;
    padding-left: 12px;
}
.container .t-l {
    background-position: 0 -85px;
    left: 0;
    top: 0;
}
.container .t-r {
    background-position: 0 -89px;
    right: 0;
    top: 0;
}
.container .b-l {
    background-position: 0 -97px;
    bottom: 0;
    left: 0;
}
.container .b-r {
    background-position: 0 -93px;
    bottom: 0;
    right: 0;
}
.container .t-l, .container .t-r, .container .b-l, .container .b-r {
    height: 4px;
    width: 4px;
}
.t-l, .t-r, .b-l, .b-r {
    overflow: hidden;
    position: absolute;
}
</style>
<body>
<div class="container">
<div class="inner">
    <div class="inner-content">
      <ul class="notice-list">
        <li>1、思杰收购云文件管理公司ShareFile</li>
        <li>2、谷歌推云存储服务Cloud Storage挑战亚马逊S3</li>
      </ul>
    </div>
</div>
<b class="t-l"></b>
<b class="t-r"></b>
<b class="b-l"></b>
<b class="b-r"></b>
</div>

</body>
</html>