html - Adding a fancy "frame" to picture -


How do I change this image frame - box-shadow in CSS?
If anyone has some ideas, please tell me :)

inside a container device Position located. Apply CSS3 2D conversion

  & lt; Div class = "container" & gt; & Lt; Div class = "box 1" & gt; & Lt; / Div & gt; & Lt; Div class = "box 2" & gt; & Lt; / Div & gt; & Lt; Div class = "box 3" & gt; & Lt; / Div & gt; & Lt; / Div & gt; Container {width: 200px; Height: 200 pixels; } .box1, .box2, .box3 {boundary: 1px solid # 333; Height: 150px; Width: 150px; Status: Completed; top 10; Left: 10; } .box1 {Transform: rotate (5 degrees); MS-Consequently: Rotate (5deg); / * IE 9 * / -bbkit-transform: rotate (5 degrees); / * Opera, Chrome, and Safari * Box 2 {Transform: Rotate (-5 degree); MS-transform: rotate (-5deg); / * IE 9 * / -wbkit-transform: to rotate (-5 degree); / * Opera, Chrome, and Safari * Box 3 {background color: white;   Edit   

Dropshort with Updated JSfiddle:

Edit2 This is an overdue editing, but I am going to the answers which I have seen how much progress I have made in the form of a developer

If you look at JSFiddle with a drop shadow in Chrome, then you are jagged Pay attention to the edges.

Added: / * Added to remove jagged edges * / .container * {-webkit-backface-visibility: hidden; }

See example:


Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

How to access user directory in lazarus? -

java - Gradle dependencies: compile project by relative path -