许多最新网站中的“嵌入”效果给我留下了深刻的印象。一些例子是
和
中间的那条线。如今，许多网站都使用这种线条/效果。
我试图用边框实现相同的效果，但颜色组合对我不起作用而且不合适。
其他网站是否使用这些图片？这容易吗？
任何示例 css ？
示例网站: http://woothemes.com , http://net.tutsplus.com/ , http://www.w3schools.com (在标题中)和 wordpress 管理页面侧边栏中
最佳答案
不知道这是否有帮助，但使用比 2 个相邻元素的背景稍亮和稍暗的 1 像素边框可以模拟这一点。例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
div{background:#555;}
.top{border-bottom:#333 solid 1px;}
.bot{border-top:#777 solid 1px;}
</style>
</head>
<body>
<div class="top">this</div>
<div class="bot">andthis</div>
</body>
</html>
编辑:
作为旁注，在上面的示例中切换亮色和暗色会给您带来略微凸起/浮雕的边框效果。
关于html - 在网站中使用 CSS 创建 "inset"效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3045808/