css 製造圖片邊框效果

<!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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章