Html 在网站中使用 CSS 创建“插入”效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3045808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a "inset" effect using CSS in websites
提问by Aakash Chakravarthy
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 ?
任何示例css？
Example sites: http://woothemes.com, http://net.tutsplus.com/, http://www.w3schools.com(in the header) and in wordpress admin page sidebar
示例站点： http://woothemes.com、http://net.tutsplus.com/、http://www.w3schools.com（在标题中）和 wordpress 管理页面侧边栏中
回答by edl
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:
不知道这是否会有所帮助，但是使用比 2 个相邻元素的背景稍亮和稍暗的 1 px 边框可以模拟这一点。例如：
<!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.
作为旁注，在上面的例子中切换明暗会给你一个稍微凸起/浮雕的边框效果。
回答by Leandri
Use border-bottom and box-shadow.
使用 border-bottom 和 box-shadow。
body {
background-color: #D0D9E0;
}
h1 {
border-bottom: 1px solid #EFF2F6;
box-shadow: inset 0 -1px 0 0 #AFBCC6;
}
Check out the Fiddleand Browser Compatibilityfor box-shadow property.
回答by ancestral
Using an <hr>is quite clever.
使用 an<hr>非常聪明。
Following up on user1302036's answer, all we need is to set the color of the top and bottom borders for an <hr>and set the left and right border widths to 0.
按照user1302036 的回答，我们只需要为 an<hr>设置顶部和底部边框的颜色，并将左右边框宽度设置为 0。
hr {
border-width: 1px 0px;
border-color: #666 transparent #ccc transparent;
}
回答by álvaro González
3D effects in 2D computer displays are mere optical effects accomplished by the use of colour: lighter variations suggest bright (higher areas) and darker variations suggest shadown (lower areas). Most people is right-handed and writing lights tend to be on the left side of the desktop, so you use an imaginary source of light in the left top corner of the screen.
2D 计算机显示器中的 3D 效果仅仅是通过使用颜色实现的光学效果：较浅的变化表明明亮（较高的区域），较暗的变化表明暗淡（较低的区域）。大多数人是惯用右手的人，书写灯往往位于桌面的左侧，因此您可以在屏幕的左上角使用假想的光源。
It's been possible to do it with pure CSS in rectangular areas for years:
多年来，在矩形区域中使用纯 CSS 可以做到这一点：
body{
background-color: #8080C0;
}
div{
display: inline-block;
margin: 1em;
padding: 1em;
width: 25%;
color: white;
background-color: #8080C0;
}
div.outset{
border-width: 1px;
border-style: solid;
border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2;
}
div.inset{
border-width: 1px;
border-style: solid;
border-color: #4D4D9B #A6A6D2 #A6A6D2 #4D4D9B;
}<div class="inset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="outset">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>Fonts, however, require newer CSS attributes that don't have wide support yet and, also, do not allow to provide more than one colour, so it's common to use images. See http://www.quirksmode.org/css/textshadow.html
然而，字体需要较新的 CSS 属性，这些属性还没有得到广泛支持，并且不允许提供一种以上的颜色，因此使用图像是很常见的。见http://www.quirksmode.org/css/textshadow.html
回答by Kali Charan Rajput
this is css text shadow property.for get this effect use
这是css文本阴影属性。为了得到这个效果使用
.style{
text-shadow:0 1px #FFFFFF;
}
but really this is effect of color combination that you are using in background and text. so you should do.
但实际上这是您在背景和文本中使用的颜色组合的效果。所以你应该这样做。
- use text shadow color dark than background color.
- use text shadow color light than text color.
- 使用比背景颜色深的文本阴影颜色。
- 使用文字阴影颜色比文字颜色浅。
回答by user1302036
Easiest, draw an horizontal rule
最简单，画一条水平线
使用以下样式，可以根据背景颜色修改对比度：
hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;
height:0px;
}
回答by Josh Powell
Here is a more current and flexible solution that can be used.
这是一个可以使用的更当前和更灵活的解决方案。
.hr {
background: rgba(0, 0, 0, 0.6);
height: 1px;
width: 100%;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
<span class="hr"></span>
By using RGBA(Red, Green, Blue, Alpha) you can use white/black with an alpha(opacity) to make the illusion of an inset effect.
通过使用 RGBA（红色、绿色、蓝色、Alpha），您可以使用带有 alpha（不透明度）的白色/黑色来制造插入效果的错觉。
回答by Amr Kamel
Simply do the following:
只需执行以下操作：
.hr {
opacity: 0.2;
border-top: 1px solid #000;
border-bottom: 1px solid #fff;
}
Play with opacity and colors to suit your design, It works on all backgrounds I think ;)
使用不透明度和颜色来适应您的设计，我认为它适用于所有背景；)
