创建一个“插入"在网站中使用 CSS 的效果 [英] Create a "inset" effect using CSS in websites
问题描述
我对许多最新网站中的插图"效果印象深刻.一些例子是
I am very much impressed by the "inset" like effect in many latest websites. Some examples are
和
中心线.如今，许多网站都使用这些线条/效果.
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 ?
任何示例 css?
示例站点:http://woothemes.com、http://net.tutsplus.com/、http://www.w3schools.com(在标题中)和 wordpress 管理页面侧边栏
Example sites: http://woothemes.com, http://net.tutsplus.com/ , http://www.w3schools.com (in the header) and in wordpress admin page sidebar
推荐答案
不知道这是否会有所帮助，但使用比 2 个相邻元素的背景稍亮和稍暗的 1 px 边框可以模拟这一点.例如:
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>
作为旁注，在上面的例子中切换明暗会给你一个稍微凸起/浮雕的边框效果.
As a side note, switching light and dark in the example above will give you a slightly raised/embossed border effect.
这篇关于创建一个“插入"在网站中使用 CSS 的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
