Home > Web Front-end > CSS Tutorial > How to use css outline attribute?

How to use css outline attribute?

青灯夜游
Release: 2020-09-08 09:30:44
Original
6336 people have browsed it

CSS outline property is a shorthand property, used to set all outline properties, such as color, style, width, in one statement. It can draw a line around the element at the edge of the border, which can highlight The role of elements.

How to use css outline attribute?

CSS outline property

Function: is drawn on A line around an element, just outside the edge of the border, that serves to highlight the element.

outline shorthand property sets all outline properties in one declaration. The following properties can be set in order: outline-color, outline-style, outline-width. If you do not set one of the values, there will be no problem. For example, outline:solid #ff0000; is also allowed.

●outline-color: Specifies the color of the outline.

●Outline-style: Specifies the style of the outline.

●outline-width: Specifies the width of the outline.

Note: Contour lines do not occupy space and are not necessarily rectangular.

Note: So all mainstream browsers support the outline attribute; Internet Explorer 8 (and later versions) only supports the outline attribute when !DOCTYPE is specified.

Example of using CSS outline attribute

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
div
{
border:red solid thin;
outline:#00ff00 dotted thick;
padding:10px;
}
</style>
</head>
<body>
<div>测试文本!</div>
</body>
</html>
Copy after login

Rendering:

How to use css outline attribute?

Above That’s the entire content of this article, I hope it will be helpful to everyone’s study.

The above is the detailed content of How to use css outline attribute?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template