github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs for border-image

Browse Source
This commit is contained in:
Scott Davis 2012-01-02 02:46:19 -05:00
parent 3d23b36f63
commit 9c0539aadf
4 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
doc-src/content/reference/compass/css3/border_image.haml Normal file
View File

@ -0,0 +1,15 @@
---
title: Compass Border Image
crumb: Border Image
framework: compass
stylesheet: compass/css3/_border-image.scss
meta_description: Specify the border image for all browsers.
layout: core
classnames:
- reference
- core
- css3
---
- render 'reference' do
%p
The border-image mixin is used to give a block element an image to be used instead of the normal border. It automatically outputs the correct vendor specific syntax for each browser (e.g. <code>-webkit-border-image</code> and <code>-moz-border-image</code>). See <a href="http://www.w3.org/TR/css3-background/#the-border-image">CSS3 spec: border-image</a>.

10
frameworks/compass/stylesheets/compass/css3/_border-image.scss
View File

@ -2,7 +2,15 @@
//border-image: source slice width outset repeat //border-image: source slice width outset repeat
// defaults none 100% 1 0 stretch via http://www.w3schools.com/cssref/css3_pr_border-image.asp // 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') { $default-border-image-slice : 100% !default;
$default-border-image-width : 1 !default;
$default-border-image-outset : 0 !default;
// repeated | rounded | stretched
$default-border-image-repeat : unquote('stretch') !default;
// The border-image is used to give a block element an image to be used instead of the normal border.
@mixin border-image($source, $slice:$default-border-image-slice, $width:$default-border-image-width, $outset:$default-border-image-outset, $repeat:$default-border-image-repeat) {
$value: (image_url($source), $slice, $width, $outset, $repeat); $value: (image_url($source), $slice, $width, $outset, $repeat);
@include experimental(border-image, $value, @include experimental(border-image, $value,
-moz, -moz,

1
frameworks/compass/stylesheets/compass/css3/_border-radius.scss
View File

@ -17,6 +17,7 @@ $default-border-radius: 5px !default;
// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)} // .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}
// //
// Which generates: // Which generates:
//
// .simple { // .simple {
// -webkit-border-radius: 4px 4px; // -webkit-border-radius: 4px 4px;
// -moz-border-radius: 4px / 4px; // -moz-border-radius: 4px / 4px;

8
test/fixtures/stylesheets/compass/css/border-image.css vendored
View File

@ -1,5 +1,5 @@
.simple { .simple {
-webkit-border-image: url('/images/100x150.jpeg?busted=true'), 100%, 1, 0, "stretch"; -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"; -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"; -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"; } border-image: url('/images/100x150.jpeg?busted=true'), 100%, 1, 0, stretch; }