如何为下面的图像框(不是阴影框)使用CSS
昨天我遇到了阴影盒的概念,但我下面的图像不是阴影盒,而是, 1.带有1px边框的简单div如何为下面的图像框(不是阴影框)使用CSS,css,Css,昨天我遇到了阴影盒的概念,但我下面的图像不是阴影盒,而是, 1.带有1px边框的简单div div{ width: 100px; height: 100px; border: 1px solid black; } 二,。框的右边缘和下边缘有一层非常厚的边框,但不等于相应边框的宽度,因此下面的代码对我来说不起作用 div{ width: 100px; height: 100px; border: 1px solid black; border-bottom: 5px solid black; b
div{
width: 100px;
height: 100px;
border: 1px solid black;
}
二,。框的右边缘和下边缘有一层非常厚的边框,但不等于相应边框的宽度,因此下面的代码对我来说不起作用
div{
width: 100px;
height: 100px;
border: 1px solid black;
border-bottom: 5px solid black;
border-right: 5px solid black;
}
请为这样的盒子推荐一些CSS。谢谢,这里有一个棘手的解决方案(没有CSS3,所有浏览器都支持):
HTML
更新:仅使用1个DIV:您最好复制下面的代码并检查一次,我认为它更适合您喜欢的输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
text-align:center;
}
* {
margin:0;
padding:0;
border:0;
}
a {
text-decoration:none;
outline:none;
}
.container {
margin:10px auto;
width:960px;
}
.black {
background:#000;
width:200px;
height:100px;
border-radius: 0 4px 0 4px;
bottom: -4px;
height: 98px;
position: absolute;
right: -4px;
width: 200px;
z-index: -1;
}
.white {
border:1px solid #000;
background:#fff;
width:200px;
height:100px;
position:relative;
}
</style>
</head>
<body>
<div class="container">
<div class="white">
<div class="black">
</div>
</div>
</div>
</body>
</html>
无标题文件
身体{
文本对齐:居中;
}
* {
保证金:0;
填充:0;
边界:0;
}
a{
文字装饰:无;
大纲:无;
}
.集装箱{
利润率:10px自动;
宽度:960px;
}
布莱克先生{
背景:#000;
宽度:200px;
高度:100px;
边界半径:0 4px 0 4px;
底部:-4px;
高度:98px;
位置:绝对位置;
右:-4px;
宽度:200px;
z指数:-1;
}
怀特先生{
边框:1px实心#000;
背景:#fff;
宽度:200px;
高度:100px;
位置:相对位置;
}
我正在考虑创建一个大小相同但比原来的黑匣子低1px、右1px的黑匣子……你面对的问题是什么?@gaurav,这不是一个黑匣子你只能用黑匣子这么做是的,我们都知道它不是一个黑匣子。那个黑盒子的目的只是视觉上的,还是包含了一些jQuery?@shivan,看起来不错。感谢您提供的解决方案,但是2 DIV使用2 DIV是一个问题吗?不,不是问题,我认为单DIV无法实现这一点添加1 DIV的解决方案,甚至更棘手。但是很难通过实际实现来管理top/left/z-index
#white_box {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #FFF;
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
#black_box {
width: 100px;
height: 100px;
background-color: #000;
position: absolute;
top: 23px;
left: 23px;
z-index: 1;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
text-align:center;
}
* {
margin:0;
padding:0;
border:0;
}
a {
text-decoration:none;
outline:none;
}
.container {
margin:10px auto;
width:960px;
}
.black {
background:#000;
width:200px;
height:100px;
border-radius: 0 4px 0 4px;
bottom: -4px;
height: 98px;
position: absolute;
right: -4px;
width: 200px;
z-index: -1;
}
.white {
border:1px solid #000;
background:#fff;
width:200px;
height:100px;
position:relative;
}
</style>
</head>
<body>
<div class="container">
<div class="white">
<div class="black">
</div>
</div>
</div>
</body>
</html>