How is the css outline attribute used? The difference between outline attributes and border attributes (example) |
您所在的位置:网站首页 › outline前端 › How is the css outline attribute used? The difference between outline attributes and border attributes (example) |
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 loginLet 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 : 轮廓--outline 我是默认下的连接 我是一个测试连接,会红 Copy after loginThe rendering is as follows: 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 loginFrom 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! |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |