html - 使用多个透明框阴影防止重叠 Angular-6ren

html - 使用多个透明框阴影防止重叠 Angular

转载作者：行者123 更新时间：2023-11-28 08:20:39

32

4

实际目标:仅使用 CSS 为瓷砖(一些包含图像)提供雕刻/浮雕外观。

问题:我试图在瓷砖上使用四个具有透明度的嵌入框阴影来创建雕刻外观。不幸的是，四个半透明阴影在图 block 的 Angular 处相互重叠，产生了不良效果。

有没有办法防止盒子阴影在 Angular 落重叠？或者是否有任何其他可行的方法可以在这些瓷砖上实现透明雕刻外观？

==> DEMO

body {background-color: #1E1E1E;}
.engrave1 { 
    background-color: #222;
    width: 150px; height: 150px;
    box-shadow: 0px 5px 2px 0px RGBa(0,0,0,0.3) inset,
                -5px 0px 2px 0px RGBa(100,100,100,0.3) inset,
                0px -5px 2px 0px RGBa(140,140,140,0.3) inset,
                5px 0px 2px 0px RGBa(90,90,90,0.3) inset;
}
.engrave2 { 
    background-color: #222;
    width: 150px; height: 150px;
    border-radius: 8px;
    box-shadow: 0px 9px 2px 0px RGBa(0,0,0,0.3) inset,
                -9px 0px 2px 0px RGBa(100,100,100,0.3) inset,
                0px -9px 2px 0px RGBa(140,140,140,0.3) inset,
                9px 0px 2px 0px RGBa(90,90,90,0.3) inset;
}

<body>
    
<div class="engrave1"></div>
    <br/>
<div class="engrave2"></div>
    
</body>

最佳答案

更新:我实际上让它看起来很不错。 <强> ==> DEMO

我在写这个问题时有一个想法，但这不是一个非常优雅的解决方案。我在图 block 中创建了 4 个子元素，而不是框阴影。 children 被塑造成梯形，这样 Angular 就可以完美对齐。每个 child 都被单独定位并在其代表的一侧着色。

这种方法的缺点:

无法在不手动更改每个梯形的规范的情况下调整图 block 的大小
不能对伪“阴影”应用模糊
看起来像是来自糟糕的 powerpoint 演示文稿或 90 年代网站的东西(可能会通过一些调整得到修复)
不符合圆 Angular

==> DEMO

body {background-color: #1E1E1E;}
.engrave1 { 
    position: relative;
    background-color: #222;
    width: 150px; height: 150px;
    background-image: url(http://lorempizza.com/150/150);
}
.engrave2 { 
    position: relative;
    width: 150px; height: 150px;
    background-image: url(http://lorempizza.com/150/150);
    border-radius: 8px;
    overflow: hidden; /*hides overflowing pseudoshadows*/
}
.engrave3 { 
    position: relative;
    width: 150px; height: 150px;
    border-radius: 8px;
    overflow: hidden; /*hides overflowing pseudoshadows*/
}
.engrave4 { 
    position: relative;
    width: 150px; height: 150px;
}
.pseudoshadow {
    position: absolute;
}
.pseudoshadow.cover { /*just for extra looks */
    top: 5px; left: 5px;
    width: 140px; height: 140px;
    background-color: RGBa(0,0,0,0.1);
}
.pseudoshadow.top {
    top: 0;
	border-top: 5px solid RGBA(0,0,0,0.4);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	height: 0;
	width: 140px;    
}
.pseudoshadow.right {
    top: 0;
    right: 0;
	border-right: 5px solid RGBA(0,0,0,0.2);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	width: 0;
	height: 140px;    
}
.pseudoshadow.bottom {
    bottom: 0;
	border-bottom: 5px solid RGBA(255,255,255,0.05);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	height: 0;
	width: 140px;    
}
.pseudoshadow.left {
    top: 0;
    left: 0;
	border-left: 5px solid RGBA(0,0,0,0.2);
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	width: 0;
	height: 140px;    
}

<body>
    
<div class="engrave1">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>
    
    <br/>
    
    
<div class="engrave2">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>

    <br/>
    
    
<div class="engrave3">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>


    <br/>
    
    
<div class="engrave4">
    
    <div class="pseudoshadow cover"></div>
    
    <div class="pseudoshadow top"></div>
    <div class="pseudoshadow right"></div>
    <div class="pseudoshadow bottom"></div>
    <div class="pseudoshadow left"></div>
    
</div>
    
</body>

关于html - 使用多个透明框阴影防止重叠 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28780065/

32

4

0

文章推荐： html - 左 Div 应移至右 Div 下方

文章推荐： javascript - jQuery 中的 DatePicker 不显示日历

文章推荐： javascript - Angular $http 服务缓存无法正常工作

文章推荐： javascript - Yii - CHtml::ajaxLink - TypeError:设置未定义

XNA 阴影？
如何在 XNA 中用图元(线条)制作的矩形周围制作阴影效果？我目前正在制作我的矩形，方法是将图元放入我制作的批处理中，然后添加纹理作为它们的背景。这些矩形应该象征着“ window ”。我希望它们也
opengl - 漫射光/阴影
我刚刚在引擎中安装了照明系统。在以下屏幕截图中，您可以看到一个亮起的指示灯(黄色方框): 考虑到在照亮场景的光线之上，它还实现了FOV，该FOV将遮挡视场之外的任何物体。这就是为什么阴影的左侧部分看起
java - 在本地jar到gradle项目中的阴影/阴影
我是不熟悉Gradle并尝试编译我的项目的新手，但是也“阴影化”(就像在maven中一样)本地jar文件。我正在尝试使用gradle shadow插件，但是当我运行“shadowJar”时，它并没有
JavaScript map 阴影
用 JavaScript 编写解析器，对于任何语言，显然都使用 Map 来存储名称到变量的映射。大多数语言允许以某种方式或内部作用域中的另一个变量遮蔽外部作用域中的变量。实现这一点的理想数据结构是功
C++ 继承相同类型签名的成员函数(阴影)
// Shadowing #include using namespace std; const int MNAME = 30; const int M = 13; class Pers
Android 导航栏和状态栏高程/阴影
我想设置我的导航栏和状态栏，就像下面链接中图片中的示例一样。我怎么能这样做 see the example 最佳答案您可以通过像这样设置样式属性来简单地做到这一点: se
java - 阴影/变量范围
我以为我理解阴影的概念。但是这段代码让我想知道: public class Counter { int count = 0; public void inc() { count++; } pu
ios - UINavigationController 阴影
尝试遵循概述的方法 here为我的 UINavigationController 添加阴影。但是，该方法似乎不起作用。这是我使用的代码: - (void)viewDidLoad { [sup
ios - UITableViewCell 阴影
如何给 UITableViewCell 上下两边添加阴影？我试过这个: cell.layer.shadowOpacity = 0.75f; cell.layer.shadowRadius = 5.0
html - 光标上奇怪的不透明度/阴影？
我有一个博客，我为它制作了自定义光标，但它们并不是我想要的样子。使用一些免费的光标编辑程序制作光标，它们看起来只有一种颜色，没有边框、黑色或阴影。即使以图片形式上传后，在线.png 文件看起来也没有阴
css - 饼图 - 阴影
我能得到像这张附图那样的带阴影的饼图吗？如果是，怎么办？这是饼图的代码: 最佳答案遗憾的是，Kendo UI 饼图不支持任何 3D 元素。您可以在 Telerik 论坛中阅读相关信息 he
CSS 阴影 :inset
我一直试图获得给定的 curl 阴影效果 here对于 box-shadow:inset 但没有得到任何东西。任何onw有任何线索我可以让它工作吗？一直试图让它在这个上工作jsfiddle 将其更
javascript - 单击后保留边框/阴影
我正在构建一个类似商店的东西，所以我有产品，侧面有圆形按钮，当我点击它们时，它会改变产品的颜色。一切都很完美，但我希望当我单击按钮时，按钮保持高亮状态。代码: CSS: #but1 { posi
html - 中底框-阴影
我想创建一个底部边框下方有框显示的 H2 这是我的“基本”代码: My H2 #toto{ box-shadow: 0 4px 2px -2px gray; } 但我想
css - 如何删除列表中元素之间的空格/阴影
我有一个包含卡片列表的模板: --> {{event.eventTitle}} {{event.eve
CSS 阴影(如何摆脱顶部阴影？)
CSS 阴影有问题。我不知道如何摆脱这里的顶部阴影:http://i.imgur.com/5FX62Fx.png 我得到的: box-shadow: 0 -3px 4px -6px #777, 0 3
java - 如何删除状态栏和主屏幕之间的分隔线/阴影？
在我的应用程序中，我想保留状态栏但使其背景与主屏幕相同。所以我创建了一个自定义主题来设置应用程序背景: @drawable/background_shelf true
android ListView 阴影
滚动 ListView 时如何去除阴影。我在列表的顶部和底部出现了阴影。最佳答案关于android ListView 阴影，我们在Stack Overflow上找到一个类似的问题： https
iOS:MaterialComponents 阴影
我想在我的 Swift 4 中使用 MaterialComponents 为我的 View 添加阴影，但我不明白如何使用阴影电梯。我创建了一个名为 ShadowedView 的类，类似于 docume
ios - CAShapeLayer 阴影
给定以下 CAShapeLayer 是否可以在提示处添加如下图所示的阴影？我正在使用 UIBezierPath 来绘制条形图。 - (CAShapeLayer *)gaugeCircleLayer

首页

博学

6Ren·AI

商城

html - 使用多个透明框阴影防止重叠 Angular