inital implimentation of border-image

This commit is contained in:
Scott Davis 2012-01-02 02:29:16 -05:00
parent a7a8ccab62
commit 3d23b36f63
4 changed files with 24 additions and 0 deletions

View File

@ -1,4 +1,5 @@
@import "css3/border-radius"; @import "css3/border-radius";
@import "css3/border-image";
@import "css3/inline-block"; @import "css3/inline-block";
@import "css3/opacity"; @import "css3/opacity";
@import "css3/box-shadow"; @import "css3/box-shadow";

View File

@ -0,0 +1,15 @@
@import "shared";
//border-image: source slice width outset repeat
// defaults none 100% 1 0 stretch via http://www.w3schools.com/cssref/css3_pr_border-image.asp
@mixin border-image($source, $slice:100%, $width:1, $outset:0, $repeat:'stretch') {
$value: (image_url($source), $slice, $width, $outset, $repeat);
@include experimental(border-image, $value,
-moz,
-webkit,
-o,
not -ms,
not -khtml,
official
);
}

View File

@ -0,0 +1,5 @@
.simple {
-webkit-border-image: url('/images/100x150.jpeg?busted=true'), 100%, 1, 0, "stretch";
-moz-border-image: url('/images/100x150.jpeg?busted=true'), 100%, 1, 0, "stretch";
-o-border-image: url('/images/100x150.jpeg?busted=true'), 100%, 1, 0, "stretch";
border-image: url('/images/100x150.jpeg?busted=true'), 100%, 1, 0, "stretch"; }

View File

@ -0,0 +1,3 @@
@import "compass/css3/border-image";
.simple { @include border-image("100x150.jpeg"); }