Home > Article > Web Front-end > How is the css outline attribute used? The difference between outline attributes and border attributes (example)

How is the css outline attribute used? The difference between outline attributes and border attributes (example)

青灯夜游Original: 2018-09-14 11:07:524063browse

This chapter will introduce to youHow to use the css outline (outline) attribute? The difference between the outline attribute and the border attribute (example) , so that everyone can understand some knowledge about the outline attribute in CSS, as well as the difference between the outline and border attributes difference. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is the CSS outline (outline) attribute

The outline (outline) is a line drawn around the element, located at the edge of the border The periphery can play the role of highlighting elements.

For example: when we usually read the content in the browser, when the mouse clicks to get an a tag link or an input radio button to gain focus, the element will be Contoured dashed box surround. This outline dotted box is the outline.

By default, when you click the a tag, input, or add a mouse click event, the browser will leave an outline frame (blue under chrome). However, these default outline frames sometimes affect the appearance and destroy the overall effect of the front-end page. We don't really want to keep them. So how to remove the browser's default outline frame, or change the default outline frame effect?

The outline (outline) property of css allows us to change the default outline dotted box effect. The outline attribute has the following related attributes:

outline: Set all outline attributes in one statement
outline-style: Set the style of the outline
outline-width: Set the width of the outline
outline-color: Set the color of the outline
outline-offset: Offset the outline and draw it on the edge of the border

The first related attribute outline is a shorthand form, the format is ：

outline: outline-color || outline-style || outline-width；

Let us not set the relevant styles of the outline one by one, but can complete the settings at once.

Let’s use the following example to see how to use the CSS outline attribute:

If you want the link to be more eye-catching when it gets focus, you can set the outline line to red, as follows ：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮廓--outline</title>
		<style>
			
			.a { outline:5px solid red; }
		</style>
	</head>
	<body>
			<a href="#">我是默认下的连接</a><br /><br />
			<a href="#" class="a">我是一个测试连接，会红</a>
	</body>
</html>

The rendering is as follows:

How is the css outline attribute used? The difference between outline attributes and border attributes (example)

And if you just want to remove the outline lines on the Tab that affect the beauty, the outline attribute can be set as follows:

.tab{ outline: none; ...... /* other properties */}

From the above example, we can see that outline (outline) and border (border) are very similar, but outline (outline) and border (border) are similar but different.

2. The difference between outline and border

Outline does not take up space. It does not add extra width or height; the border takes up the width; therefore, the outline does not affect the size or position of the element the way a border does.
outline may be non-rectangular; border is an ordinary border.
outline is designed for elements such as links, form controls, and ImageMap; border can be applied to almost all tangible html elements.

The above is the detailed content of How is the css outline attribute used? The difference between outline attributes and border attributes (example). 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：hightcharts histogram variable width seamless time scaleNext article：hightcharts histogram variable width seamless time scale

See more

How is the css outline attribute used? The difference between outline attributes and border attributes (example)

Related articles