5个回答
展开全部
<div>
<p>Test</p>
</div>
<style>
div {
width: 200px;
height: 200px;
background: #272727;
border: 1px #272727 solid;
}
p {
width: 158px;
line-height: 158px;
color: #fff;
text-align: center;
margin: 20px auto;
border-radius: 4px;
box-shadow: inset 0px 2px 8px 2px #000000;
border: 1px #666 solid;
border-left: 1px #131313 solid;
border-top: 1px #131313 solid;
}
</style>
当圆角过大时深色边和高光边交界处会露陷，要不露陷的话：
边框渐变，貌似支持的浏览器少
不用边框，用两个div嵌套，外面那个比里面那个大1px，然后外面那个用45度的斜方向背景渐变(支持的浏览器多)，里面那个用背景色加内阴影。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
div {
width: 130px;
height: 130px;
border-radius: 4px;
border:1px solid #333;
box-shadow:inset 0 0 5px 5px #ccc;
}只能在支持css3的浏览器下工作
其中，模拟凹槽线的重要代码是最后一行，几个数值分别为
x轴的阴影偏移量
y轴的阴影偏移量
模糊度
模糊长度
我这里为了突出效果，长度写的比较大，要完全做到上面截图的效果只能您自己慢慢调了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<body style="background:#272727;">
<div style="border-radius:5px; background:#1d1d1d; box-shadow:0px 1px 5px #000000 inset; width:200px; height:200px; border-bottom:1px solid #666666; border-left:1px solid #2b2b2b; border-right:1px solid #2b2b2b;"></div>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div class="lt">
<div class="mei">
</div>
</div>
.lt{ width:100px; height:100px; padding:10px; background:#272727;}
.mei{ width:100px; height:100px; box-shadow:inset 0 0 5px #0c0c0c; border-bottom:1px solid #666; border-left:1px solid #2b2b2b;border-radius:5px; background:#1d1d1d}用到内阴影和圆角。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
