Home > Article > Web Front-end > Detailed analysis of Outlines in CSS

Detailed analysis of Outlines in CSS

黄舟Original: 2017-07-27 09:15:011788browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the behavior attribute in CSS and its use with examplesNext article：Introduction to the behavior attribute in CSS and its use with examples

See more

Detailed analysis of Outlines in CSS

Related articles