How to draw a "smart" border in Javascript / CSS?

I mean something like this (look at the kids playing soccer tile). See how it increases the bright开发者_C百科ness of each pixel of the arbitrary picture? How do I do that with jQuery and/or CSS?

One option is to kind of fake it with a very small inset box shadow:

 box-shadow: inset 0px 0px 5px 0px #ffff66;

Click here for an example.

Take a look at this: jsFiddle. Using a white-transparent border and the image starting at the same position as the border does the trick.

Try using this solution http://css-tricks.com/7423-transparent-borders-with-background-clip/ , it's not compatibile with IE, versions < 9, however.

You could use the <canvas> element to get/manipulate the image pixels, have a look here: https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas

put the image in the background of a div and set a inset box-shadow.

#myDiv{
background: url(http://dummyimage.com/300/09f/fff.png) 0 0 no-repeat;
-moz-box-shadow:inset 0 0 1px #fff;
-webkit-box-shadow:inset 0 0 1px #fff;
box-shadow:inset 0 0 1px #fff;
}

With the last pixel-parameter you can control the width of the inset-border

@jason; try this solution its also work in IE8 & above http://jsfiddle.net/sandeep/Ksr86/2/

CSS:

body{background:#000}

#test {
    background:url('http://cdn.natural-life.ca/mlb-wrap-ie6.jpg') no-repeat center center;
    width: 350px;
    height: 350px;
    position:relative;
}
#test:after {
    position:absolute;
    background:rgba(0,0,0,0.5);
    content:"";
    display:block;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8
}