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
Post a Comment