css 制造图片边框效果

关注

转载最新推荐文章于 2025-10-02 18:13:14 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

CSS实现透明背景下的圆角渐变边框效果本文详细解析了CSS实现透明背景下的圆角渐变边框效果的两种核心方法。针对CSS边框不支持直接渐变的难点，介绍了兼容性优秀的双层盒子结构方案与更现代、能实现真正透明背景的Mask遮罩技术，并提供了实战对比与选型指南，帮助开发者根据项目需求灵活应用。阅读详情

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

收录于