标签: shadow

我正在尝试确定是否存在用于创建阴影垂直线的 css 方法，如本例所示

我想创建一条类似于在这篇文章中找到的水平线并标记为解决方案，但只有底部出现阴影。我能得到的最接近的是在线条中间显示的阴影，上下都有。

我目前正在尝试找出一种方法，以便将鼠标悬停在我的网站（http://thefloodplains.com/）首页上的每个单独的框上时，该特定框会出现阴影动画。我希望它看起来与此页面上的内容非常相似：http://tobiasahlin.com/blog/how-to-animate-box-shadow/。我已使用此页面作为尝试设置悬停阴影效果的指南。

这是专门针对我的网页 ( http://thefloodplains.com/ ) 上的 div 框的 CSS/HTML：

.col-md-4 {
    color:#00A5D1;
    height:300px;
}

.col-md-3 {
    color:#00A5D1;
    height:300px;
    box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.col-md-4:hover {
    background-color: #FFE097;
}
.col-md-3:hover {
    -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
    }

.col-md-4 h3 {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

.col-md-4 {
    color:#00A5D1;
    height:300px;
    border: 1px solid #FF8B6F;
    position: relative;
} …

我用阴影创建了线圆，但是当我尝试更改时shadowRadius，阴影没有显示

let path = UIBezierPath(ovalIn: rect)
let shapeLayer              = CAShapeLayer()
shapeLayer.path             = path.cgPath
shapeLayer.fillColor        = UIColor.clear.cgColor
shapeLayer.strokeColor      = UIColor.white.cgColor
shapeLayer.lineWidth        = 1
shapeLayer.shadowOpacity    = 0.9
shapeLayer.shadowColor      = UIColor.white.cgColor
shapeLayer.shadowOffset     = .zero
shapeLayer.shadowRadius     = 10.0
//shapeLayer.shadowPath       = path.cgPath

layer.addSublayer(shapeLayer)

具有默认圆角半径的线圆

圆角半径为 10.0 的线圆

有人能帮我吗？

即使在视图中添加了填充后，高程也无法正常工作，这是“相对”布局，我还要在图像视图中添加阴影。

  <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/tvContinueWith"
        android:layout_marginTop="@dimen/_10dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imgFb"
            android:layout_alignParentStart="true"
            android:layout_centerInParent="true"
            android:elevation="@dimen/_5dp"
            android:src="@drawable/fb"
            />

        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imgGoogle"
            android:layout_toRightOf="@+id/imgFb"
            android:layout_marginLeft="@dimen/_5dp"
            android:layout_centerInParent="true"
            android:src="@drawable/google"
            android:elevation="@dimen/_5dp"
            />

    </RelativeLayout>

我对文本阴影属性有疑问。

这有效：

text-shadow: 1px 1px 0 var(--primary-color);

这不起作用：

text-shadow: 1px 1px 0 rgba(var(--primary-color), 0.5);

有谁知道问题是什么？

谢谢你！

我创建了一个简单的播放图标。我将 SVG 文件导入 Android Studio 并将其作为 imageView 来源。然而，不幸的是我无法从我的 Adope XD 文档中引入下拉阴影。在这两种情况下，我一直在尝试通过代码复制下拉阴影效果。然而我一直没有成功。

左图是我所拥有的，右图是我需要的：

我一直在搞乱现有的代码，但没有成功。这是我到目前为止所拥有的：

图片查看：

<ImageView
    android:id="@+id/thumbnail_next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:background="@drawable/background_drop_shadow"
    app:srcCompat="@drawable/ic_next_button_image_select" />

ic_next_button_image_select（导入的 SVG）：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="38dp"
    android:viewportWidth="40"
    android:viewportHeight="38">
  <path
      android:pathData="M12,0L28,0A12,12 0,0 1,40 12L40,26A12,12 0,0 1,28 38L12,38A12,12 0,0 1,0 26L0,12A12,12 0,0 1,12 0z"
      android:fillColor="#1ed760"/>
  <path
      android:pathData="M27.6,17.28a2,2 0,0 1,-0 3.439l-10.083,5.987A2,2 0,0 1,14.5 24.987L14.5,13.013a2,2 0,0 1,3.021 -1.72Z"
      android:fillColor="#090909"/>
</vector>

background_drop_shadow（我找到并尝试使用的代码）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#02000000" android:width="1dp" …

我想要实现这个目标:

我找不到类似的东西,但这是我失败的尝试:

#one {
  width: 200px;
  height: 100px;
  background-color: white;
  box-shadow: 0px 0px 20px #2D8DBD;
  left: 50px;
  display: inline-block;
  margin-right: -100px;
}
#two {
  width: 200px;
  height: 100px;
  background-color: white;
  box-shadow: 0px 0px 20px #B22D2D;
  left: -50px;
  display: inline-block;
  margin-left: -50px;
  z-index: -1;
}

<center>
  </br>
  </br>
  <div id="one"></div>
  <div id="two"></div>
</center>

jsFiddle演示.

我正在使用bootstrap,所以我不认为只是制作另一个"渐变"图像会更简单.

此外,我尝试妥协:http://designposts.net/fresh-free-css3-and-html5-tutorials/但我的图像被圈起来,所以它原来是一个切割方块.

我正在寻找一种从下到上渐变图像的方法

初始与 目标

图像在光滑的滑块中运行。我已经尝试过辐射渐变，但没有任何有用的结果。