10

许多最新网站中的“插图”效果给我留下了深刻的印象。一些例子是 替代文字

和

替代文字

中间的那条线。如今，许多网站都使用这些线条/效果。

我试图用边框实现同样的效果，但颜色组合对我不起作用，而且不合适。

其他网站是否使用这些图像？这容易吗？

任何示例 css 吗？

示例网站： http : //woothemes.com、http ://net.tutsplus.com/、http : //www.w3schools.com（在标题中）和 wordpress 管理页面侧边栏

4

8 回答 8

17

不知道这是否会有所帮助，但使用比 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>

编辑：

作为旁注，在上面的示例中切换明暗会给您带来略微凸起/浮雕的边框效果。

于 2010-06-15T14:12:35.173 回答
4

2D 计算机显示器中的 3D 效果仅仅是通过使用颜色实现的光学效果：较浅的变化表示明亮（较高的区域），较暗的变化表示阴影（较低的区域）。大多数人是右撇子，书写灯往往位于桌面的左侧，因此您在屏幕的左上角使用假想的光源。

多年来，在矩形区域中使用纯 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>

然而，字体需要更新的 CSS 属性，这些属性还没有得到广泛的支持，而且还不允许提供一种以上的颜色，因此通常使用图像。见http://www.quirksmode.org/css/textshadow.html

于 2010-06-15T14:23:10.570 回答
4

使用 an<hr>非常聪明。

跟进user1302036 的回答，我们只需要为 an<hr>设置上下边框的颜色，并将左右边框宽度设置为 0。

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}
于 2012-08-02T17:04:56.697 回答
4

使用边框底部和框阴影。

body {
  background-color: #D0D9E0;
}

h1 {
  border-bottom: 1px solid #EFF2F6;
  box-shadow: inset 0 -1px 0 0 #AFBCC6;
}

查看 box-shadow 属性的小提琴和浏览器兼容性。

于 2014-09-22T19:02:58.103 回答
2

这是 css 文本阴影属性。用于获得此效果

.style{
    text-shadow:0 1px #FFFFFF;
}

但实际上这是您在背景和文本中使用的颜色组合的效果。所以你应该这样做。

  1. 使用比背景颜色深的文本阴影颜色。
  2. 使用文字阴影颜色比文字颜色浅。
于 2010-06-15T14:53:15.300 回答
1

最简单，画一条横线

使用以下样式，可以根据背景颜色修改对比度：

hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;  
height:0px;
}
于 2012-06-21T21:37:21.247 回答
1

这是可以使用的更当前和更灵活的解决方案。

JSFIDDLE

.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>

通过使用 RGBA（红色、绿色、蓝色、Alpha），您可以使用带有 alpha（不透明度）的白色/黑色来制作插入效果的错觉。

于 2013-10-24T23:51:21.363 回答
1

只需执行以下操作：

.hr {
  opacity: 0.2;
  border-top: 1px solid #000;
  border-bottom: 1px solid #fff;
}

使用不透明度和颜色来适应您的设计，它适用于我认为的所有背景；）

于 2014-02-16T15:47:57.013 回答