css3 这种半透明边框带阴影，里面填充白色该怎么做？
3个回答
展开全部
<!DOCTYPE html>
<head>
<meta charset='UTF-8' />
<title>Transparent Borders</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<style>
#lightbox {
background-color: white;
-moz-background-clip: padding; /* Firefox 3.6 */
-webkit-background-clip: padding; /* Safari 4? Chrome 6? */
background-clip: padding-box; /* Firefox 4, Safari 5, Opera 10, IE 9 */
border: 20px solid rgba(0,0,0,0.3);
/*-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;*/
padding: 30px;
width: 250px;
text-align: center;
position: absolute;
top: 100px;
left: 200px;
}
</style>
</head>
<body>
<div id="page-wrap">
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<p>这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度这里是很多很多文字，方便看清透明度</p>
<div id="lightbox">
<h1>一个层就可以搞定</h1>
ye！！！！
</div>
</div>
</body>
</html>
一个层就可以搞定的了。。。用到background-clip
这里的效果是这样：
阴影什么的，自己加上就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
logo在线生成器
2024-10-28 广告
在上海数都信息科技有限公司，我们擅长利用先进的设计软件与创意理念，为客户定制高质量的圆形图标。圆形图标作为视觉元素的经典之作，能够有效传达品牌理念与产品特性。我们精心挑选色彩搭配，融合简约而不失精致的线条，打造出既符合美学标准又具备高识别度...
点击进入详情页
本回答由logo在线生成器提供
展开全部
#s3 {padding:20px;width:500px;height:300px;margin:auto;background:#fff;background:rgba(0, 0, 0, 0.6);filter:Alpha(opacity=60);box-shadow:10px 10px 20px rgba(0,0,0,0.5);}
.s4 {width:500px;height:300px;background:#fff;}
------------------------------------------------------------------
<div id="s3">
<div class="s4"></div>
</div>
.s4 {width:500px;height:300px;background:#fff;}
------------------------------------------------------------------
<div id="s3">
<div class="s4"></div>
</div>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
试了下，边框貌似不能用rgba，那么可以弄2个div。
<div class="outer"><div class="inner"></div></div>
.outer{width: 100px;height: 100px;padding:10px;background-color:rgba(51,51,51,.5);box-shadow: 0 0 10px 5px #aaa;}
.inner{width: 100px;height: 100px;background-color: #fff;}
外面div比里面多10px，我是用的padding。外面div设置rgba半透明，里面div设置白色。样子跟边框差不多。
-------------割-------------
又试了下，边框可以用rgba，border:10px solid rgba(238, 238, 238,.5);
<div class="outer"><div class="inner"></div></div>
.outer{width: 100px;height: 100px;padding:10px;background-color:rgba(51,51,51,.5);box-shadow: 0 0 10px 5px #aaa;}
.inner{width: 100px;height: 100px;background-color: #fff;}
外面div比里面多10px，我是用的padding。外面div设置rgba半透明，里面div设置白色。样子跟边框差不多。
-------------割-------------
又试了下，边框可以用rgba，border:10px solid rgba(238, 238, 238,.5);
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
