CSS轮廓样式属性为,简述CSS轮廓样式

在网页设计中，如果你想突出一些元素，通常会怎么做?改变字体样式或者文本样式?除此之外，还有其他方法吗？答案是肯定的，这个方法就是今天小编想跟大家分享的内容——css的轮廓样式。

一、什么是轮廓

在CSS中，轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

二、CSS outline属性

提示：outline在一个声明中设置所有的轮廓属性

1.颜色设置

如果需要设置轮廓的颜色，我们用outline-color

代码可以这样写：

效果显示如下：

2.样式设置

轮廓的样式设置我们使用outline-style属性。轮廓的样式有很多种，你想知道具体有哪些，分别是什么效果？

请先看下面的代码:

运行结果:

3.宽度设置

宽度设置我们使用outline-style属性

代码举例如下:

运行效果:

三、轮廓与边框的区别

看了上面几段代码的运行效果，可能大家会有这样一个问题：轮廓与边框效果看起来很像，它们有什么区别呢？

下面小编为大家总结一下：

1.轮廓是不占空间的,既不会增加额外的width或者height，而边框会增加元素框的宽度和高度。

2.轮廓不能进行上下左右单独设置，而边框可以。

3.边框可应用于几乎所有有形的html元素，而轮廓是针对链接、表单控件和ImageMap等元素设计。

4.轮廓的效果将随元素的focus而自动出现，相应的由blur而自动消失。

CSS轮廓样式的属性虽然不多，但如果能与其他样式设置综合运用，相信能给你的网页增添不少色彩！大家不妨动手试试，或许会有意想不到的收获喔！

CSS轮廓样式属性为,简述CSS轮廓样式相关推荐

html中样式属性有哪些,css字体样式属性有哪些？
css字体样式属性有:1.font-size:字号大小.2.font-family:规定元素的字体系列.3.font-weight:字体粗细.4.font-style:字体风格.5.font:综合设置 ...
CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
css中reset属性详解,css中如何使用counter-reset属性
css中如何使用counter-reset属性发布时间:2020-09-23 14:26:58 来源:亿速云阅读:83 作者:小新这篇文章主要介绍css中如何使用counter-reset属性, ...
css基础语法与注释,简述CSS注释
你知道什么是css注释?你了解CSS注释有什么作用?你知道为什么要进行注释?不知道?没关系,下面小编就为大家慢慢解释一下. 一.什么是CSS注释 Css注释又被称作CSS注解,是在css文件代码间加入 ...
css不换行属性_前端 | css display:flex 的六个属性你知道吗
前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
css多个属性怎么写,.css多个属性读取写法？
object.css('width','height') 这个是设置的格式啊.当前的意思是object的width的值被设置成了height.但是你看它返回的应该是一个函数,看样子像原码.具体没看了. ...
前端JavaScript DOM BOM 自学复盘 D1（DOM-获取DOM元素、修改HTML标签/表单/css样式属性、定时器-间歇函数）
内容概要 1. Web API 基本认知 1.1. 作用和分类 1.2. 什么是DOM 1.3. DOM作用 1.4 DOM树 1.4.1. DOM树是什么? 1.4.2. DOM 树的作用 1.5 ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
CSS常用样式属性有哪些？代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...

CSS轮廓样式属性为,简述CSS轮廓样式

CSS轮廓样式属性为,简述CSS轮廓样式相关推荐

最新文章

热门文章