Marks, Orphans, and More Style Sheet Properties - Moz border radius
(Page 2 of 4 )
-moz-border-radius
IE n/a NN n/a Moz all Saf n/a Op n/a CSS n/a
Inherited: No
This is a shortcut property that lets you set the radius of one or more border corners. The number of values determines which sides receive the assigned colors. Note that this value arrangement differs from the preliminary CSS3 border-radius property value setup.
CSS Syntax
-moz-border-radius: radius {1,4}
Value
A border corner radius can be defined by a length measure, signifying the length of the radius of the imaginary circle from which the rounded corner comes. The larger the value, the more rounded the corner becomes. For screen display, the pixel length unit is most appropriate. You may also use a percentage value in the range between 0% (no rounding) to 50% (maximum rounding). The rounded border does not crop content of the element.
This property accepts one, two, three, or four radius values, depending on how many and which corners you want to make round. Value quantities and positions are interpreted as shown in the following table.
| Number of values | Effect |
| 1 | All four corners set to same value |
| 2 | Top left and bottom right corners set to the first value, top right and bottom left corners set to the second value |
| 3 | Top left corner set to first value, top right and bottom left corners set to second value, bottom right corner set to third value |
| 4 | Top left, top right, bottom right, and bottom left corners set, respectively |
Initial Value 0
Example
div.hotbox {-moz-border-radius: 20px} div.circle {-moz-border-radius: 50%}
Applies To All elements.
-moz-border-radius-bottomleft,
-moz-border-radius-bottomright,
-moz-border-radius-topleft,
-moz-border-radius-topright
IE n/a NN n/a Moz all Saf n/a Op n/a CSS n/a
Inherited: No
Controls the radius of one border corner. Note that the value arrangement differs from the preliminary CSS3 corner-specific border-radius property value setup.
-moz-opacity
CSS Syntax
-moz-border-radius-bottomleft: radius
-moz-border-radius-bottomright: radius
-moz-border-radius-topleft: radius
-moz-border-radius-topright: radius
Value See -moz-border-radius.
Initial Value 0
Example
div.bizarro {-moz-border-radius-topright:10%; -moz-border-radius-bottomright:10% }
Applies To All elements.
-moz-opacity
IE n/a NN n/a Moz all Saf n/a Op n/a CSS n/a
Inherited: No
Controls the level of opacity of the element. The lower the value, the more transparent the element becomes. This is a proprietary Mozilla property that was joined by the CSS3 opacity property in Mozilla 1.7.2.
CSS Syntax
-moz-opacity: alphaValue
Value
The level of opacity is determined by a floating-point number between 0.0 and 1.0. A completely opaque rendering occurs at a value of 1.0. Percentage values supported in earliest Mozilla versions have been dropped.
Initial Value 1
Example div#watermark {-moz-opacity: 0.4}
Applies To All elements .
Object Model Reference
[window.]document.getElementById("elementID").style.MozOpacity
opacity
IE n/a NN n/a Moz 1.7.2 Saf 1.2 Op 9 CSS 3
Inherited: No
Controls the level of opacity of the element. The lower the value, the more transparent the element becomes. Although the property is technically not inherited, the opacity of all child elements of a container are governed by the setting of the parent container.
CSS Syntax
opacity: alphaValue
Value
The level of opacity is determined by a floating-point number between 0.0 and 1.0. A completely opaque rendering occurs at a value of 1.0.
Initial Value 1
Example div#watermark {opacity: 0.35}
Applies To All elements.
Object Model Reference
[window.]document.getElementById("elementID").style.opacity
Next: Orphans >>
More DHTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
