Detailed analysis of Outlines in CSS-CSS Tutorial-php.cn

Detailed analysis of Outlines in CSS

黄舟

Release： 2017-07-27 09:15:01

Original

1874 people have browsed it

Description:

A line drawn around the element, located outside the edge of the border, can highlight the element and does not occupy space.

In Not available under IE.

##outlineComposite attributeoutline:outline-color||outline-style||outline-width##outline-colorinvert: default value, use the inverse color of the background color##outline-styleSet or retrieve the style of the line outline outside the objectnone:default valuedashed:dotted outlineoutline-widthSet or retrieve The width of the line outline outside the objectmedium:default.Default widththick:greater than the default width

Property	Description	Remarks
	Sets or retrieves the line outline outside the object, and the outer outline (outline) is drawn on the border (border) The outside is not necessarily a rectangle
Settings Or retrieve the color of the line outline outside the object	color: color
	dotted:dotted outline	solid:solid outline double: Double-line outer contour groove: Draw the 3D groove outer contour according to the value of outline-color ridge: Draw the 3D convex groove outer contour according to the value of outline-color inset: Draw the outer contour of the 3D groove according to the value of outline-color Draw a 3D concave outer contour based on the value of color outset: Draw a 3D convex outer contour based on the value of outline-color
	thin:less than the default width	length:length

Example:

<!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>无标题页</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>
</head>
<body>
    <span 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>
</html>

Copy after login

The effect under Firefox

The above is the detailed content of Detailed analysis of Outlines in CSS. For more information, please follow other related articles on the PHP Chinese website!