tombenner / nui

Style iOS apps with a stylesheet, similar to CSS
MIT License
3.76k stars 459 forks source link

UIView together shadow and corners #346

Open luxystech opened 8 years ago

luxystech commented 8 years ago

I'm using NUI for my project and trying to apply properties for UIView the shadow and corners together it doesn't work.

ViewWithShadow{
corner-radius: 5;
shadow-color: #e6e6e6;
border-color: #e6e6e6;
border-width: 1,3;
shadow-offset:2,2;
shadow-opacity: 80;
shadow-radius:2;
}

It shows me only borders. If I comment first line - I see the shadow

ViewWithShadow{
    /*corner-radius: 5;*/
    shadow-color: #e6e6e6;
    border-color: #e6e6e6;
    border-width: 1,3;
    shadow-offset:2,2;
    shadow-opacity: 80;
    shadow-radius:2;
    }

Appreciate in advance for any cheats with NUI.

chgandm commented 8 years ago

This is due to the application of the radius automatically setting masksToBounds to YES for the view's layer. What I ended up doing is define a hierarchy of views, with the outer wrapper view defining the shadow and a clear background color, and the inner content view defining the corner radius:

  Outer {
    background-color: clear;
    shadow-color: #000000;
    shadow-opacity: 0.25;
    shadow-radius: 5;
  }

  Inner {
    background-color: #AAAAAA;
    corner-radius: 5;
  }
luxystech commented 8 years ago

Thanks, will try