logo标签列表

在网站中使用CSS创建“内嵌”效果

htmlcsswebeffectsinsets
10

我非常喜欢最新的许多网站中出现的类似“内嵌”效果。一些例子如下： alt text

和

alt text

居中的线条。现在，许多网站使用这种类型的线条/效果。

我试图使用边框来实现相同的效果，但颜色组合不适合我，而且也不完整。

其他网站是否使用图像来实现这些效果？这很容易吗？

有任何css示例吗？

示例网站：http://woothemes.com，http://net.tutsplus.com/，http://www.w3schools.com（在标题中），以及在WordPress管理页面侧边栏中。

2
给我们提供示例的URL，我们就可以为您找到示例CSS - 这就是网络的工作方式 :) - Skilldrick
你尝试过使用 border-style:groove;，但感觉效果不够好？ - Richard JP Le Guen
1
这是一个很棒的变化：dabblet.com/gist/1609945 - Web_Designer
8个回答
17

不知道这是否有帮助，但使用比相邻两个元素的背景稍微浅一些和深一些的1像素边框可以模拟此效果。例如：

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

编辑：

值得一提的是，将上面示例中的明暗切换会给边框带来稍微凸起/浮雕的效果。

4

使用 <hr> 是相当巧妙的。

跟随user1302036的答案，我们只需要设置顶部和���部边框的颜色，并将左右边框宽度设置为0即可实现对 <hr> 的样式调整。

hr {
  border-width: 1px 0px;
  border-color: #666 transparent #ccc transparent;
}
你试过了吗？ - Rafael Herscovici
4

使用 border-bottom 和 box-shadow。

body {
  background-color: #D0D9E0;
}

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

请查看Fiddle和浏览器兼容性，了解box-shadow属性。

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

2
这是CSS文本阴影属性。要获得此效果，请使用：
.style{
    text-shadow:0 1px #FFFFFF;
}

实际上，这是由于您在背景和文本中使用的颜色组合产生的效果。

因此，您应该：

  1. 使用比背景颜色更深的文本阴影颜色。
  2. 使用比文本颜色更浅的文本阴影颜色。
2
只需按照以下步骤进行：
.hr {
  opacity: 0.2;
  border-top: 1px solid #000;
  border-bottom: 1px solid #fff;
}

通过调整不透明度和颜色来适应您的设计，它可以在所有背景上使用，我想 ;)

1
最简单的方法是使用以下样式绘制一条水平线
，对比度可以根据背景颜色进行修改。
hr {
background-color: #000;
border-top: solid 1px #999;
border-left: none;  
height:0px;
}
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（不透明度）来制造嵌入式效果的错觉。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接