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

Home

Web Front-end

CSS Tutorial

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

青灯夜游

Sep 14, 2018 am 11:07 AM

bordercssoutline

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

css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中，可用list-style-type属性来去掉ul的圆点标记，语法为“ul{list-style-type:none}”；list-style-type属性可设置列表项标记的类型，当值为“none”可不定义标记，也可去除已有标记。

css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是：css是层叠样式表单，是将样式信息与网页内容分离的一种标记语言，主要用来设计网页的样式，还可以对网页各元素进行格式化；xml是可扩展标记语言，是一种数据存储语言，用于使用简单的标记描述数据，将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中，可以利用cursor属性实现鼠标隐藏效果，该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状，当属性值设置为none时，就可以实现鼠标隐藏效果，语法为“元素{cursor:none}”。

css里outline是什么Jul 27, 2022 pm 08:39 PM

在css中，outline指的是设置元素轮廓的属性，可以指定元素轮廓的样式、颜色和宽度。outline是一个简写属性，可以在一个声明中按顺序同时设置样式、颜色和宽度，语法“outline:outline-color outline-style outline-width;”；如果不设置其中的某个值，也不会出问题。