个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在 figure 元素上提供了一个 box-shadow。但是，由于我提供的 *{margin:10px}，图像出现了倾斜。有什么方法可以让我仍然保持这个边距并能够将框阴影放在 figure 元素上吗？
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link
rel="stylesheet"
href="drop.css"
>
</head>
<body>
<section id="pics">
<figure
id="pic1"
class="pictures"
>
<img
alt="figure1"
src="http://b-i.forbesimg.com/kellyclay/files/2013/12/glass.jpg"
title="pic1"
>
<figcaption class="figuredetails">Fig1</figcaption>
</figure>
<figure
id="pic2"
class="pictures"
>
<img
alt="figure2"
src="http://glass-apps.org/wp-content/uploads/2013/06/google-glass1.jpg"
title="pic2"
>
<figcaption class="figuredetails">Fig2</figcaption>
</figure>
</section>
<section id="content">
<p>hello</p>
</section>
</body>
</html>
CSS:
@CHARSET "UTF-8";
*{
margin: 10px;
/* padding: 10px; */
}
#pics{
width:100%;
padding: 50px 50px;
}
.pictures{
float: left;
width:200px;
height:200px;
box-shadow: 10px 10px 5px #888888;
}
.pictures:before{
border:5px solid black;
}
.pictures:after{
border:5px solid black;
}
.pictures img{
width:100%;
height:auto;
border: 2px solid;
border-color: #ff0000;
}
/* #pic1{
-ms-transform: rotate(30deg); IE 9
-webkit-transform: rotate(30deg); Chrome, Safari, Opera
transform: rotate(30deg);
} */
#pic2{
padding-left: 50px;
}
#content{
clear: both;
}
.pictures > .figuredetails{
color: red;
padding-left: 20px;
}
JSfiddle 在这里:
最佳答案
正如您的第一条评论所说，您希望图片显示在阴影框内，因此您唯一需要做的就是删除
#pic2{
padding-left: 50px;
}
我也没有发现任何用途
*{
margin: 10px;
/* padding: 10px; */
}
也将其删除。
结果:JsFiddle
关于html - 由于根边距，图形元素上的框阴影变得倾斜，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23066771/
25
4
0
我一直在为此而苦苦挣扎。我想插入一个图像，并将其“靠近”讨论该图像的文本，但是该页面上的文本将围绕图像环绕/流动。 我已将图像转换为eps格式。最初，我尝试使用图形环境(\begin {figure}
我在用户界面中创建了管理控制台，管理员可以在其中执行所有操作，例如创建、删除用户、向用户分配应用程序以及从用户界面删除用户的应用程序访问权限 我厌倦了使用 Microsoft 图形 API 和 Azu
我在用户界面中创建了管理控制台，管理员可以在其中执行所有操作，例如创建、删除用户、向用户分配应用程序以及从用户界面删除用户的应用程序访问权限 我厌倦了使用 Microsoft 图形 API 和 Azu
我想为计算机图形学类(class)做一个有趣的项目。我知道那里有很多文献(即 SIGGRAPH session 论文)。我对计算机图形学(即图像处理、3D 建模、渲染、动画)兴趣广泛。但是，我只学了
我试图在 MaterializeCSS 网站上创建一些类似于这个的图形，但我不知道它来自哪里，我查看了整个 MaterializeCSS 网站，它不是框架的一部分，我找不到在代码中他们使用的是什么 我
我有一个包含 1 到 6 之间的各种数字的 TextView ，每个数字在每一行上代表一次，例如 123456 213456 214356 ...... 我希望能够绘制一条蓝线来跟随单个数值在列表中向
我目前在 Windows 7 上使用 Netbeans 和 Cygwin，我希望用 C 语言编写一个简单的 2D 游戏。 我设法找到的大多数教程都使用 Turbo C 提供的 graphics.h，C
亲爱的，我正在尝试将 kaggle 教程代码应用于 Iris 数据集。 不幸的是，当我执行图表的代码时，我只能看到这个输出而看不到任何图表: matplotlib.axes._subplots.Axe
我需要加快我正在处理的一些粒子系统的视觉效果。令人眼前一亮的是添加混合、积累以及粒子上的轨迹和发光。目前我正在手动渲染到浮点图像缓冲区，在最后一分钟转换为无符号字符，然后上传到 OpenGL 纹理。为
在研究跨网络的最短路径算法时，我想生成网络图片。我想代表节点(圆圈)、链接(线)、遍历链接的成本(链接线中间的数字)和链接的容量(链接线上它代表的节点旁边的数字)在这张图中。是否有任何库/软件可以帮助
尽管我已将应用程序从库添加到 Azure AD，但我无法看到何时尝试提取数据。但我可以看到添加的自定义应用程序。就像我添加了 7 个应用程序一样； 2 个来自图库(Google 文档、一个驱动器)和
因此，我正在构建一个系统，该系统具有“人员”，“银行帐户”和“银行帐户交易”。 我需要能够回答以下问题: “将所有与1/2/3度有联系的人归还给特定的人”， “返回年龄在40岁以上的所有人” “从德国
我在 JFrame 构造函数中有以下简单代码 super(name); setBounds(0,0,1100,750); setLayout(null); setVis
(这是java)我有一个椭圆形，代表一个单位。我希望椭圆形的颜色代表单位的健康状况。因此，一个完全健康的单位将是全绿色的。随着单位生命值的降低，椭圆形开始从底部填充红色。因此，在 50% 生命值下，椭
我目前正在开发一个学校项目。我们必须制作一个Applet，我选择了JApplet。由于某种原因，我用来显示特定字符串的面板将不会显示。这里可能有什么问题？请指出我正确的方向。另外，我看了一些教程，
我正在尝试创建一个 Simon game 。我正在编写游戏程序，但遇到了问题。我希望程序从队列中读取游戏中之前存在的所有值，并以正确的顺序将它们的颜色变为闪烁(我选择将它们变为灰色，然后在第二秒后恢复
我正在尝试创建一个框架，该框架在同一框架的顶部有一个图形面板(通过布局)，在其下方有一个按钮/标签面板。到目前为止，我似乎已经能够将它们放在同一个框架上，但与按钮/标签面板相比，图形面板非常小....
我用 Java 编写了一个解决数独问题的代码，并使用 Java Applet 来设计它。现在，我尝试使用 Java Swing 使其看起来更好，并添加一些功能，例如“保存”数独板等。不幸的是，我对 J
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
我现在尝试了 8 个多小时来解决这个问题，但无法弄清楚，请帮助找出我的代码有什么问题。 int main() { int gd = DETECT, gm; float ANGLE =
我是一名优秀的程序员,十分优秀！