HTML CSS提升角落阴影

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML CSS提升角落阴影相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
 
 
<html>
<head>
<style>
.box{
    width:200px;
    height:100px;
 
}
 
.drop-shadow {
    position:relative;
    float:left;
    width:40%;    
    padding:1em; 
    margin:2em 10px 4em; 
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute; 
    z-index:-2;
}
 
.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}
 
 
.lifted {
    -moz-border-radius:4px; 
    border-radius:4px;
}
 
.lifted:before,
.lifted:after { 
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);    
    -moz-transform:rotate(-3deg);   
    -ms-transform:rotate(-3deg);   
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
 
.lifted:after {
    right:10px; 
    left:auto;
    -webkit-transform:rotate(3deg);   
    -moz-transform:rotate(3deg);  
    -ms-transform:rotate(3deg);  
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}
 
</style>
</head>
<body>
 
    <div class="box drop-shadow lifted"></div>
 
</body>
</html>

四张图片共享一个角落：替代 HTML+CSS 布局？

【中文标题】四张图片共享一个角落：替代 HTML+CSS 布局？【英文标题】：Four pictures sharing a corner : alternative HTML+CSS layout? 【发布时间】：2018-10-29 06:05:02 【问题描述】：

我正在尝试设置四个具有公共角落的图像面板。图片是随机挑选的，通常具有不同的尺寸。

我设法在表格的相关单元格中使用图片的绝对定位来获得正确的布局：

  table 
    width: 100%;
  

  td 
    position: relative;
  
  
  img 
    position: absolute;
  
  
  .top img 
    bottom: 0; 
  
  
  .bottom img 
    top: 0;
  
    
  .left img 
    right: 0;
  
 
  .right img 
    left: 0;
  
<table>
  <tr>
    <td class="top left">
      <img src="http://placekitten.com/200/300"/>
    </td>
    <td class="top right">
      <img src="http://placekitten.com/300/300"/>
    </td>
  </tr>
  <tr>
    <td class="bottom left">
      <img src="http://placekitten.com/300/100"/>
    </td>
    <td class="bottom right">
      <img src="http://placekitten.com/200/200"/>
    </td>
  </tr>
</table>

但是，tds 由于绝对定位，其高度为零。结果，我很难将整个表格放在整个页面内的正确位置。

我想知道是否有其他方法可以实现这种布局？

【问题讨论】：

【参考方案1】：

试试弹性盒子。 https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

        .Aligner 
            display: flex;
            align-items: center;
            justify-content: center;
         
        .Aligner-item 
            max-width: 50%;
        
        .flex-item img
            vertical-align:top;
        
    <div class="Aligner"> 
        <div class="Aligner-item">
            <div class="flex-item">
                <img src="http://placekitten.com/200/300" />
                 <img src="http://placekitten.com/300/300" />
            </div>
        </div>
    </div>
    <div class="Aligner"> 
        <div class="Aligner-item">
            <div class="flex-item">
            <img src="http://placekitten.com/100/300" />
            <img src="http://placekitten.com/200/200" />
          </div>
        </div>
    </div>

【讨论】：

谢谢。我会接受 Cyber​​AP 的回答而不是您的回答，因为它在缩小浏览器窗口时具有更好的行为（正如运行 sn-p 时所见，在小型显示器上您的解决方案无法正确扩展，我什至认为它不起作用在我展开 sn-p 整页之前）。【参考方案2】：

让我们将其拆分为行，然后在弹性框的帮助下拆分为单元格和所有内容。

.row

  display: flex;


.cell

  width: 50%;
  flex: 0 0 auto;
  display: flex;
  padding: 5px;


.move-left

  margin-right: auto;


.move-right

  margin-left: auto;


.move-bottom

  margin-top: auto;


.move-top

  margin-bottom: auto;

<div class="row"> 
  <div class="cell">
    <img class="move-right move-bottom" src="http://placekitten.com/300/200"/>
  </div>
  <div class="cell">
    <img class="move-left move-bottom" src="http://placekitten.com/200/200"/>
  </div>
</div>
<div class="row"> 
  <div class="cell">
    <img class="move-right move-top" src="http://placekitten.com/100/300"/>
  </div>
  <div class="cell">
    <img class="move-left move-top" src="http://placekitten.com/400/200"/>
  </div>
</div>

【讨论】：

以上是关于HTML CSS提升角落阴影的主要内容，如果未能解决你的问题，请参考以下文章

这里的角落正在工作，但阴影在 iOS 9 和 10 中不起作用

四张图片共享一个角落：替代 HTML+CSS 布局？

使用 UIBezierPath 将半径设置为某些角并向自定义 UIButton 添加阴影

HTML/CSS - 阴影图像调整大小

css怎么给4个边框添加阴影

CSS3 边框