标签: box-shadow

我需要在某个block元素上创建一个box-shadow ,但仅在(例如)右侧.我做的方式是包装内部元件box-shadow到外层一个padding-right和overflow:hidden;这样的阴影其他三面是不可见的.

有没有更好的方法来实现这一目标？喜欢box-shadow-right？

编辑:我的意图是只创建阴影的垂直部分.repeat-y与规则的作用完全相同background:url(shadow.png) 100% 0% repeat-y.

我该怎么做呢？我希望我的元素看起来好像有一个阴影下划线.我不想要其他三面的影子

我有以下CSS:

box-shadow: inset 0px 0px 2px #a00;

现在我正在尝试提取该颜色以使页面颜色"skinnable".有没有办法做到这一点？只需删除颜色,然后再次使用相同的密钥就会覆盖原始规则.

似乎没有box-shadow-color,至少谷歌没有任何改变.

使用jQuery 为box-shadow属性设置动画的正确语法是什么？

$().animate({?:"0 0 5px #666"});

我试图box-shadow在所有四方面都申请.我只能在两个方面得到它:

我正在开发一个需要使用CSS3 box-shadow属性的项目.这没关系,但我发现阴影的扩散大小不能设置为父对象的百分比.

我完全理解box-shadow不是附加的,因此它不会将parent的大小作为参考.

但考虑到我需要具有完全响应的站点,其中对象流畅地缩放(不仅在断点处),这会产生问题 - 我只能以绝对单位(em或px)设置阴影扩展属性.

这有什么解决方案吗？我想过在容器内使用内部容器(用于内容)(对于"阴影" - 它没有模糊),但这会产生另一个问题 - 内部容器的垂直居中.

有解决方案吗 请不要jQuery,只是纯CSS.

谢谢

我试图建立多个边框，这些边框在用户图像周围逐渐消失。我正在这样编写CSS，但这无济于事：

width: 90px;
border-radius: 50%;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;

但是它没有提供预期的输出。我该如何实现？

在最新的Material Design文档(https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-)中,引用了一组详尽的UI元素具有各自的高程(dp中的z指数).例如,一个开关升高了1dp,而一个对话框升高了24dp.目前,Google的UI元素列表使用了10种不同的提升级别.由于高程决定了元素的阴影,我们需要10个不同的阴影.这就是我迷失的地方.

如何计算/推导出每个高程水平的正确阴影值(颜色,x偏移,y偏移,模糊,扩散)？

我找到了不同的来源,计算了5个不同高程的阴影值(https://news.layervault.com/stories/42319-calculating-shadow-values-for-material-design).然而,5个提升步骤是不够的,他们也没有解释他们如何达到这些相应的价值观.

我正在尝试使用 BoxDecoration 小部件中的 boxShadow 参数仅向容器小部件的右侧添加阴影。

new Container(
  decoration: BoxDecoration(
    color: Colors.grey.withOpacity(0.5),
    boxShadow: [
      BoxShadow(
        blurRadius: 5.0
      ),
    ],
  ),
),

此代码有效，但会在容器的每个可能的一侧添加阴影。我希望它只在右侧。

我有一个简单的屏幕，里面有一个大约 100 高的蓝色容器。我想在容器底部添加阴影或高度。

这是我下面的代码

import 'package:flutter/material.dart';
import 'package:finsec/utils/strings.dart';
import 'package:finsec/utils/dimens.dart';
import 'package:finsec/utils/colors.dart';


void main() {
  runApp(new IncomeFragment());
}

class IncomeFragment extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Stack(
        children: <Widget>[
          new Container(
            height: margin_100dp,
            color: colorPrimary,

          ),
          new Container(    //container to  overlay on top of blue container
            alignment: Alignment.topCenter,


            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[

                Text(
                    zero_amount,
                    style: TextStyle(color: white, fontSize: 40.0, fontWeight: FontWeight.bold)
                ),
              ],
            ),
          )
        ],
    );
  }
}

有人可以帮我在蓝色容器的底部添加阴影或高度吗？

见下图。shawdow 应该在红圈里 …