CSS3 snippets (draft): Difference between revisions
Jump to navigation
Jump to search
Line 98: | Line 98: | ||
{{top}} | {{top}} | ||
== snippets == | |||
;GPW border-radius:<leaf type="insert" title="border-radius" tooltip="pre { background: gold; border: ridge gold; -moz-border-radius: 13em/3em; -webkit-border-radius: 13em 3em; border-radius: 13em/3em; } Accepts one, two, three or four border-radius values, optional followed by a slash / and a second set of values. If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius."><before>-moz-border-radius: %0;-webkit-border-radius: %0;border-radius: %0;</before><after></after><param name0="hv or h/v radius"/></leaf> | |||
<div style="background: gold;-moz-border-radius: 13em/3em;-webkit-border-radius: 13em/3em;border-radius: 13em/3em;"> | |||
Differences between -moz-border-radius and -webkit-border-radius<br /> | |||
<percentage> values are are implemented in a non-standard way in Gecko (Firefox) and not supported by Safari/WebKit.<br /> | |||
Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used.<br /> | |||
Safari/WebKit doesn't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners. | |||
</div> | |||
[[Category:Snippets repository]] | [[Category:Snippets repository]] |
Revision as of 21:56, 25 March 2010
|
doc:
-moz-box-shadow: teal 60px -16px; -webkit-box-shadow: teal 60px -16px; box-shadow: teal 60px -16px;
CSS3
mozilla (et webkit):
Trident Gecko Presto WebKit
- MozAppearanceGW
- MozBackgroundClipTGPW
MozBackgroundInlinePolicy- MozBackgroundOriginTGPW
MozBindingMozBorderBottomColorsMozBorderEndMozBorderEndColorMozBorderEndStyleMozBorderWidth- MozBorderImageGPW
MozBorderLeftColors- MozBorderRadiusGPW
MozBorderRadiusBottomleftMozBorderRadiusBottomrightMozBorderRadiusTopleftMozBorderRadiusToprightMozBorderRightColorsMozBorderStartMozBorderStartColorMozBorderStartStyleMozBorderStartWidthMozBorderTopColorsMozBoxAlignMozBoxDirectionMozBoxFlexMozBoxOrientMozBoxOrdinalGroupMozBoxPack- MozBoxShadowTGPW
- MozBoxSizingTGPW
- MozColumnCountGW
- MozColumnGapGW
- MozColumnRuleGW
- MozColumnRuleColorGW
- MozColumnRuleStyleGW
- MozColumnRuleWidthGW
- MozColumnWidthGW
MozFloatEdgeMozForceBrokenImageIconMozImageRegionMozMarginEndG- MozMarginStartGW
MozOpacityuse CSS3 opacityMozOutlineMozOutlineColor- obsolete: MozOutlineOffset no longer supported at all, use OutlineOffset
MozOutlineRadiusGMozOutlineRadiusBottomleftGMozOutlineRadiusBottomtopGMozOutlineRadiusTopleftGMozOutlineRadiusToprightGMozOutlineStyleMozOutlineWidthMozPaddingEndMozPaddingStartMozStackSizing- MozTransformTGPW
- MozTransformOriginTGPW
MozUserFocusMozUserInputMozUserModifyMozUserSelectMozWindowShadow
snippets
- GPW border-radius
- <leaf type="insert" title="border-radius" tooltip="pre { background: gold; border: ridge gold; -moz-border-radius: 13em/3em; -webkit-border-radius: 13em 3em; border-radius: 13em/3em; } Accepts one, two, three or four border-radius values, optional followed by a slash / and a second set of values. If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius."><before>-moz-border-radius: %0;-webkit-border-radius: %0;border-radius: %0;</before><after></after><param name0="hv or h/v radius"/></leaf>
Differences between -moz-border-radius and -webkit-border-radius
<percentage> values are are implemented in a non-standard way in Gecko (Firefox) and not supported by Safari/WebKit.
Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used.
Safari/WebKit doesn't support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners.