创建“插入”效果使用CSS在网站 [英] Create a "inset" effect using CSS in websites
问题描述
我对许多最新网站的插入效果印象深刻。一些示例是
和
中间的线。现在，许多网站使用这些种类的线/效果。
我试图实现与边框相同，但颜色组合不工作，我不适合。 / p>
其他网站是否使用这些图片？是容易吗？
任何示例css？
示例网站：
http://woothemes.com ， http：// net.tutsplus.com/ ， http://www.w3schools.com （在标题中）和wordpress的管理页面sidebar
不知道这将有所帮助，但使用1像素的边框轻微并且比背景更暗的2个相邻元素可以模仿这一点。例如：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp ：//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title>未命名< / 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>
编辑：
，在上面的示例中切换光线和暗色将给您一个略微凸起/浮雕边框效果。
I am very much impressed by the "inset" like effect in many latest websites. Some examples are
and
The line in the center. Nowadays, many websites use these kinds of lines/effects.
I tried to achieve the same with borders but the color combination is not working me and it is not proper.
Do other websites use images for these ? is it easy to this ?
Any example css ?
Example sites: http://woothemes.com, http://net.tutsplus.com/ , http://www.w3schools.com (in the header) and in wordpress admin page sidebar
Don't know if this will help, but using 1 px borders that are slightly lighter and darker than the background of 2 adjacent elements can emulate this. For Example:
<!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>
EDIT:
As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.
这篇关于创建“插入”效果使用CSS在网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
