在网站中使用CSS创建"插入"效果

Aak*_*thy 10 html css effects insets web

许多最新网站的"插入"效果给我留下了非常深刻的印象.一些例子是 alt文本http://img687.imageshack.us/img687/457/inset2.png

和

替代文字http://img163.imageshack.us/img163/8158/inset1.png

在中心的线.如今,许多网站都使用这些线条/效果.

我尝试用边框实现相同但颜色组合不起作用,这是不正确的.

其他网站是否使用图像?这很容易吗?

任何一个例子css?

示例站点:http://woothemes.com,http: //net.tutsplus.com/,http://www.w3schools.com(在标题中)和wordpress管理页面侧栏

edl*_*edl 17

不知道这是否会帮助,但使用1间像素的边界是比2种相邻元素的背景稍明亮和灰暗可以效仿这一点.例如:

<!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>
Run Code Online (Sandbox Code Playgroud)

编辑:

作为一个侧面说明,切换光明与黑暗在上面的例子会给你一个略微凸起/浮雕边框效果.