在网站中使用CSS创建“插入”效果

<!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-15 14:12:35 edl

非常聪明！ +1 – 2010-06-15 14:13:45

[JSFIDDLE]（http://jsfiddle.net/Qym4D/）上面的（演示） – 2014-05-23 07:02:32

二维电脑显示器中的3D效果仅仅是通过使用颜色实现的光学效果：较亮的变化表明较亮（较高的区域）和较暗的变化暗示着落（较低的区域）。大多数人是右撇子，书写灯往往在桌面的左侧，所以你在屏幕的左上角使用一个虚构的光源。

它已经可以与矩形区域纯CSS做了多年：

body{ 
 
\t background-color: #8080C0; 
 
} 
 
div{ 
 
    display: inline-block; 
 
\t margin: 1em; 
 
\t padding: 1em; 
 
\t width: 25%; 
 
\t color: white; 
 
\t background-color: #8080C0; 
 
} 
 
div.outset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t border-color: #A6A6D2 #4D4D9B #4D4D9B #A6A6D2; 
 
} 
 
div.inset{ 
 
\t border-width: 1px; 
 
\t border-style: solid; 
 
\t 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-15 14:23:10

是css文字阴影property.for得到这个效果使用

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

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

使用文字阴影颜色比背景颜色暗。
使用文字阴影颜色光比文字颜色。

来源

2010-06-15 14:53:15

最简单的，画一个水平线

具有以下样式，对比度可以根据背景颜色进行修改：

hr { 
background-color: #000; 
border-top: solid 1px #999; 
border-left: none; 
height:0px; 
}

来源

2012-06-21 21:37:21 user1302036

使用一个<hr>相当巧妙。

上user1302036’s answer的后续行动，我们需要的是设置在顶部和底部边框的颜色为<hr>，并设置在左右边框宽度为0

hr { 
    border-width: 1px 0px; 
    border-color: #666 transparent #ccc transparent; 
}

来源

2012-08-02 17:04:56 ancestral

你试过了吗？ – Dementic 2017-10-12 12:57:57

当然。这是一个JSFiddle：https：//jsfiddle.net/qfsk30h4/ – ancestral 2017-10-13 16:23:40

这里是一个更大的电流灵活的解决方案，可以使用。

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（透明度）进行的插图效果的错觉。

来源

2013-10-24 23:51:21

只要做到以下几点：

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

玩与不透明度和颜色，以满足您的设计，它的工作原理上，我认为所有的背景;）

来源

2014-02-16 15:47:57

使用下边框和箱阴影。

body { 
    background-color: #D0D9E0; 
} 

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

退房的Fiddle和Browser Compatibility的box-shadow属性。

来源

2014-09-22 19:02:58

在网站中使用CSS创建“插入”效果

回答

相关问题