【CSS】outline 属性

outline属性

outline 是 CSS 属性,用于设置元素的外边框样式,包括颜色、样式和宽度。外边框是一个在元素周围的轮廓,类似于边框(border),但不会占用空间,并且不会影响布局。

outline 属性可以同时设置以下三个值:

  1. outline-color:用于设置外边框的颜色,可以是有效的 CSS 颜色值(如 #rrggbbrgba()hsl() 等)。

  2. outline-style:用于设置外边框的样式,可以是以下值之一:

    • none:无样式,没有外边框。
    • dotted:虚线样式。
    • dashed:短划线样式。
    • solid:实线样式。
    • double:双线样式。
    • groove:凹槽样式。
    • ridge:脊线样式。
    • inset:内阴影样式。
    • outset:外阴影样式。
  3. outline-width:用于设置外边框的宽度,可以是长度值(如像素)或关键字(如 thinmediumthick)。

语法:

outline: outline-color outline-style outline-width;

例如,以下是设置焦点时元素外边框样式的示例:

input:focus {outline: 2px solid blue;
}

在上述示例中,当 <input> 元素获得焦点(被选中)时,将显示蓝色、宽度为 2 像素的实线外边框,以提供视觉上的反馈。

请注意,如果只想设置外边框的颜色,可以单独使用 outline-color 属性。如果只想设置外边框的样式和宽度,可以分别使用 outline-styleoutline-width 属性。

outlineborder的区别

outlineborder 是 CSS 中两种不同的边框样式,它们有一些区别和用途:

  1. 定位不同:

    • border:用于控制元素的实际边框,它占用页面布局空间。边框位于元素的边缘,并且可以用于分隔元素之间的空间。
    • outline:用于控制元素的虚拟边框,它不占用页面布局空间。外边框在元素的边缘外部创建一个轮廓,不会影响元素的大小和位置。
  2. 占用空间:

    • border:边框会占用元素的布局空间。例如,一个元素的宽度为 100px,如果为其设置了 1px 的边框,则元素的宽度会增加为 102px。
    • outline:外边框不会占用元素的布局空间。它只是一个视觉效果,不会改变元素的实际大小。
  3. 绘制方式:

    • border:边框可以绘制不同样式的线条,如实线、虚线、点线等。还可以设置边框的颜色和宽度。
    • outline:外边框通常是单一的,只能设置颜色和宽度,样式通常是固定的,不能像边框那样灵活设置。
  4. 用途:

    • border:用于设置元素的实际边框,常用于分隔元素、设置边框效果等。
    • outline:常用于标记元素的状态,如焦点状态(focus),用于增强可访问性,使用户知道当前元素是否处于焦点状态。

一般来说,边框 border 用于实际的元素样式和布局,而外边框 outline 用于增强可视化和标记元素状态,如表单元素在获取焦点时显示的外边框等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/12897.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 镜像构建 搭建分布式LNMP论坛 实践

地址规划 nginx 172.18.0.10 mysql 172.18.0.20 php 172.18.0.30 宿主机准备 拉取镜像&#xff0c;下面以此镜像为基础 docker pull centos:7 创建自定义网段以便指定 IP 不变动 docker network create --subnet172.18.0.0/16 --opt "com.docker.network.bridge.na…

Spark Streaming流媒体引擎

Spark Streaming是Spark的上一代流媒体引擎。Spark Streaming不再有更新&#xff0c;它是一个遗留项目。Spark中有一个更新且更易于使用的流媒体引擎&#xff0c;称为结构化流媒体 概述 Spark Streaming是核心Spark API的扩展&#xff0c;支持实时数据流的可扩展、高吞吐量、…

条款38:对变化多端的线程句柄析构函数行为保持关注

条款37解释过&#xff0c;可联结的线程对应着一个底层系统执行线程&#xff0c;未推迟任务&#xff08;参见条款36&#xff09;的期值和系统线程有类似关系。这么一来&#xff0c;std::thread型别对象和期值对象都可以视作系统线程的句柄。 从这个视角来看&#xff0c;std::th…

Opencv的Mat内容学习

来源&#xff1a;Opencv的Mat内容小记 - 知乎 (zhihu.com) 1.Mat是一种图像容器&#xff0c;是二维向量。 灰度图的Mat一般存放<uchar>类型 RGB彩色图像一般存放<Vec3b>类型。 (1)单通道灰度图数据存放样式&#xff1a; (2)RGB三通道彩色图存放形式不同&#x…

Flutter 添加 example流程

一、已有Flutter工程&#xff08;命令&#xff09;添加 example 1、cd 工程(flutter_plugin ,是自己创建的)根目录 例: flutter create example 执行命令创建example PS&#xff1a;cd example 后执行flutter doctor 后就可以看到效果 2、如果需要指定iOS/Android 语言,请添加…

动态数组 Vector(难度1)(答案)

答案如下: #include<iostream> #include <iomanip> #include <cassert> using namespace std;//------下面的代码是用来测试你的代码有没有问题的辅助代码,你无需关注------ #include <algorithm> #include <cstdlib> #include <iostream&…

9SX UPS串口SHUT通讯协议

9SX UPS通讯协议 SHUT通讯协议串口定义同步SHUT数据帧UPS CommandsGET REPORT command SHUT通讯实例 在改造中碰到了某公司的9SX UPS串口通讯。原来的控制器采用了C语言编程。因为不想费事&#xff0c;向原厂家询问通讯协议。前台的小姐很骄傲的说他们不提供通讯协议了&#xf…

如何建立Docker私有仓库?

文章目录 docker私有仓库harborHarbor仓库部署Harbor仓库使用 docker私有仓库 Docker 私有仓库是一个用于存储和管理 Docker 镜像的私有存储库。它允许你在内部网络中创建和管理 Docker 镜像&#xff0c;并提供了更好的安全性和控制&#xff0c;因为你可以完全控制谁能够访问和…

MFC 透明窗体

如何制作透明窗体 &#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f; 使用SetLayeredWindowAttributes可以方便的制作透明窗体&#xff0c;此函数在w2k以上才支持,而且如果希望直接使用的话&#xff0c;可能需要下载最新的SDK。不过此函数在w2k的user32.dll里有实…

ansible自动化运维(一)

&#x1f618;作者简介&#xff1a;正在努力的99年公司职员。 &#x1f44a;宣言&#xff1a;人生就是B&#xff08;birth&#xff09;和D&#xff08;death&#xff09;之间的C&#xff08;choise&#xff09;&#xff0c;做好每一个选择。 &#x1f64f;创作不易&#xff0c;…

机器学习 day31(baseline、学习曲线)

语音识别的Jtrain、Jcv和人工误差 对于逻辑回归问题&#xff0c;Jtrain和Jcv可以用分类错误的比例&#xff0c;这一方式来代替单单只看Jtrain&#xff0c;不好区分是否高偏差。可以再计算人类识别误差&#xff0c;即人工误差&#xff0c;作为基准线来进行比较Jtrain与baselin…

JAVA Date 类型的对象,只想保留 “yyyy-MM-dd“ 格式的部分

Date 类型的对象&#xff0c;如果你只想保留 "yyyy-MM-dd" 格式的部分 1.创建一个 SimpleDateFormat 对象&#xff0c;并设置日期格式为 "yyyy-MM-dd"。 import java.text.SimpleDateFormat; import java.util.Date;Date date new Date(); SimpleDateFo…

回归预测 | MATLAB实现TCN-BiLSTM时间卷积双向长短期记忆神经网络多输入单输出回归预测

回归预测 | MATLAB实现TCN-BiLSTM时间卷积双向长短期记忆神经网络多输入单输出回归预测 目录 回归预测 | MATLAB实现TCN-BiLSTM时间卷积双向长短期记忆神经网络多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现TCN-BiLSTM时间卷积…

Thymeleaf入门

Thymeleaf是前端开发模板&#xff0c;springboot默认支持。前端模板用法大多数是类似的jsp、thymeleaf、vue.js都有while\for\if\switch等使用&#xff0c;页面组件化等。 1.前端模板区别 jsp是前后端完全不分离的&#xff0c;jsp页面写一堆Java逻辑。 thymeleaf好处是html改…

非Spring环境 | Mybatis-Plus插入数据返回主键两种方式(注解或XML)

废话不多说&#xff0c;直接撸代码: <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace&qu…

【Spring】什么是Bean的生命周期及作用域,什么是Spring的执行流程?

博主简介&#xff1a;想进大厂的打工人博主主页&#xff1a;xyk:所属专栏: JavaEE进阶 在前面的播客中讲解了如何从Spring中存取Bean对象&#xff0c;那么本篇我们来讲解Bean对象的生命周期是什么&#xff0c;Bean对象的6种作用域分别是什么&#xff0c;都有哪些区别&#xff…

filebeat吃爆内存问题

filebeat吃了很多内存&#xff0c;直接导致了系统OOM 原因分析&#xff1a;https://developer.aliyun.com/article/241161#slide-0 官网配置文件解析&#xff1a; filebeat.reference.yml | Filebeat Reference [8.9] | Elastic 定义每个采集器在获取文件时使用的缓冲区大小…

通过STM32内部ADC将烟雾传感器发送的信号值显示在OLED上

一.CubeMX配置 首先我们在CubeMX配置ADC1, 设置一个定时器TIM2定时1s采样一次以及刷新一次OLED&#xff0c; 打开IIC用于驱动OLED显示屏。 二.程序 在Keil5中添加好oled的显示库&#xff0c;以及用来显示的函数、初始化函数、清屏函数等。在主程序中初始化oled,并将其清屏。…

linux-----用户的一些操作

1介绍 用户指的是能够正常登录Linux或Windows系统(可以理解为你租了房子&#xff0c;能够正常入驻) Linux系统则允许同一时刻多个用户同时登陆&#xff0c;登陆后相互之间操作并不影响。但是Windows不允许同一时刻多个用户登陆系统。具体介绍可以&#xff1a; 6-Linux用户管…

【RTT驱动框架分析02】-串口驱动分析

串口驱动学习 0.串口驱动的使用方法 //定义一个时间 struct rt_event system_event; #define SYS_EVENT_UART_RX_FINISH 0x00000001 /* UART receive data finish event *//*串口接收回调函数 Receive data callback function */ static rt_err_t uart_input(rt_device_t …