How is the css outline attribute used? The difference between outline attributes and border attributes (example)-CSS Tutorial-php.cn

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

青灯夜游

Release： 2018-09-14 11:07:52

Original

4080 people have browsed it

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；

Copy after login

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>

Copy after login

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 */}

Copy after login

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!