Question

有了这个：

div {
    width: 200px;
    height: 100px;
    background-color: green;
    box-shadow: 0px 0px 15px #000
}

我得到一个带阴影的矩形。见https://jsfiddle.net/df9dfev5/问题是阴影有圆角。如何避免这种情况？

Answer 1

颜色较少，颜色较浅可能就像这样

https://jsfiddle.net/df9dfev5/3/

 div {
    width: 200px;
    height: 100px;
    background-color: green;
    -moz-box-shadow: 0 0 5px 5px #666;
    -webkit-box-shadow: 0 0 5px 5px #666;
    box-shadow: 0 0 5px 5px #666;
}

请看这篇文章http://www.css3.info/preview/box-shadow/

Answer 2

https://jsfiddle.net/df9dfev5/1/

    super.viewDidLoad()


    //Create an imageview and add it to the view

    let imageView = UIImageView()

    imageView.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(imageView)

    imageView.leftAnchor.constraintEqualToAnchor(view.leftAnchor).active = true

    imageView.rightAnchor.constraintEqualToAnchor(view.rightAnchor).active = true

    imageView.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true

    imageView.topAnchor.constraintEqualToAnchor(view.topAnchor).active = true



    //Create an image

    let solidColorFilter = CIFilter(name: "CIConstantColorGenerator")!

    solidColorFilter.setValue(CIColor(color: UIColor.redColor()), forKey: "inputColor")

    let cropFilter = CIFilter(name: "CICrop")!

    cropFilter.setValue(CIVector(CGRect: CGRectMake(0, 0, 300, 300)), forKey: "inputRectangle")

    cropFilter.setValue(solidColorFilter.outputImage, forKey: "inputImage")



    //Create animation images

    var animationImages = [UIImage]()

    let hueAdjustFilter = CIFilter(name: "CIHueAdjust")!

    hueAdjustFilter.setValue(cropFilter.outputImage, forKey: "inputImage")

    for (var i: CGFloat = 0; i < 10; i++) {

        hueAdjustFilter.setValue(-CGFloat(M_PI) + CGFloat(i/10.0) * 2.0 * CGFloat(M_PI), forKey: "inputAngle")

        let hueAdjustedImage = UIImage(CIImage: hueAdjustFilter.outputImage)

        animationImages.append(hueAdjustedImage)

    }


    print("Break here to inspect images in animationImages array. None are nil")


    //Try to animate the images using imageview animationImages

    imageView.animationImages = animationImages

    imageView.animationDuration = 4.0

    imageView.startAnimating() //ERROR THROWN HERE

第三个0是模糊半径。当它低时，盒子阴影不会模糊不清。

Answer 3

我认为首先要评估你想要的阴影看起来是什么，灯应该来自哪里等，这一点非常重要。然后你可以确定你需要的值。

您可以更改颜色值，而不是使用模糊值来减轻阴影颜色。知道你不想要一个不切实际的过度圆形阴影，意味着你将不得不使用你的偏移值，这就是为什么确定光线来自何处很重要。

以下是对此的看法：https://jsfiddle.net/df9dfev5/6/

div {
     width: 200px;
     height: 100px;
     background-color: green;
     box-shadow: 3px 6px 2px #bbb
 }

我选择让我的光源来自左上角，大多数来自顶部，因此我将影片向右偏移3px并向下偏移6px。 2px模糊会影响阴影的一些漫反射外观，而颜色#bbb（浅灰色）会影响其余部分。

Answer 4

这将为您box-shadow: -2px -1px 15px 16px rgba(0,0,0,0.75);

执行此操作

请参阅小提琴https://jsfiddle.net/df9dfev5/2/

方框上的圆形框阴影

4 个答案: