Description:
A line drawn around an element located on the periphery of the border edge. It can highlight the element and does not occupy space.
Unavailable in IE.
| Attribute | Description | Remarks |
| Outline | Composite attributes Set or retrieve the line outlines outside the object. The outer line is drawn outside the border, not necessarily a rectangle. |
Outline: Outline-color | outline-style | outline-Width |
| Outline-color | Set or retrieve the color of the line outline outside the object | Color: Color Invert: default value. The background color is reversed. |
| Outline-style | Set or retrieve the style of the line outline outside the object | None: Default Value Dotted: Out-of-line Contour Dashed: dotted line outline Solid: solid outer contour Double: double line outer contour Groove: draws a 3D groove contour based on the value of outline-color. Ridge: draws a 3D convex groove outer contour based on the value of outline-color. Inset: draws a 3D concave outer contour based on the value of outline-color. Outset: draws a 3D convex and outer contour based on the value of outline-color. |
| Outline-Width | Set or retrieve the width of the line outline outside the object | Medium: Default. default width Thin: smaller than the default width Thick: greater than the default width Length: Length |
Instance:
<! Doctype HTML public" -// W3C // dtd xhtml 1.0 transitional // en "" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <HTML xmlns =" Http://www.w3.org/1999/xhtml "> <Head> <title> No title page </title> <style type =" Text/CSS "> Span {border: solid 1px red; display: block; width: 200px ;}. span1 {outline-style: dotted ;}. span2 {outline-style: dashed ;}. span3 {outline-style: Groove ;}. span4 {outline-style: Ridge ;}. span5 {outline-style: inset ;}. span6 {outline-style: outset ;}</style> Class =" Span1 "> 111111111 </span> <br/> <Span Class =" Span2 "> 222222222 </span> <br/> <Span Class =" Span3 "> 333333333 </span> <br/> <Span Class =" Span4 "> 444444444 </span> <br/> <Span Class =" Span5 "> 555555555 </span> <br/> <Span Class =" Span6 "> 666666666 </span> </body>
Effect in Firefox
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
