CSS outline详解:轮廓属性的详细介绍

在这里插入图片描述

什么是outline?

outline(轮廓)是CSS中一个有趣的属性,它在元素边框(border)的外围绘制一条线。与border不同的是,outline不占用空间,不会影响元素的尺寸和位置。这个特性使它在某些场景下特别有用。

outline的基本属性

1. outline-style

定义轮廓的样式,常用值包括:

.element {
    /* 实线 */
    outline-style: solid;
    
    /* 虚线 */
    outline-style: dashed;
    
    /* 点线 */
    outline-style: dotted;
    
    /* 双线 */
    outline-style: double;
    
    /* 无轮廓 */
    outline-style: none;
}

2. outline-width

设置轮廓的宽度:

.element {
    /* 具体数值 */
    outline-width: 2px;
    
    /* 关键字 */
    outline-width: thin;    /* 通常是1px */
    outline-width: medium;  /* 通常是3px */
    outline-width: thick;   /* 通常是5px */
}

3. outline-color

定义轮廓的颜色:

.element {
    outline-color: red;
    outline-color: #ff0000;
    outline-color: rgb(255, 0, 0);
    outline-color: transparent;
}

4. outline简写属性

可以使用简写方式同时设置多个属性:

.element {
    /* width | style | color */
    outline: 2px solid red;
    
    /* 移除轮廓 */
    outline: none;
}

outline的特殊属性

outline-offset

这个属性用于设置outline与元素边框之间的距离:

.element {
    border: 1px solid black;
    outline: 2px solid red;
    outline-offset: 5px;  /* outline会在border外5px处绘制 */
}

实际应用示例

1. 焦点状态突出显示

input:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

2. 自定义按钮焦点样式

.custom-button {
    border: 1px solid #ccc;
    outline: none; /* 移除默认outline */
}

.custom-button:focus {
    outline: 2px dashed #666;
    outline-offset: 2px;
}

3. 图片选中效果

.gallery-image {
    border: 1px solid #ddd;
}

.gallery-image.selected {
    outline: 3px solid #28a745;
    outline-offset: -3px; /* 负值让outline在内部显示 */
}

outline与border的主要区别

  1. 空间占用

    • border会占用空间,会影响元素大小和周围元素的位置
    • outline不占用空间,不会影响布局
  2. 形状适应

    • border会跟随元素的圆角(border-radius)
    • outline通常呈现矩形,不会完全跟随元素的圆角
  3. 分边设置

    • border可以分别设置上下左右四条边
    • outline只能设置整体样式

使用注意事项

  1. 可访问性考虑
/* 不推荐 */
*:focus {
    outline: none;
}

/* 推荐 */
*:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
}
  1. 性能影响
    outline通常比box-shadow的性能要好,在需要显示元素边界时可以优先考虑使用outline。

浏览器兼容性

outline属性在现代浏览器中都有很好的支持,但在一些特殊场景下(如outline-offset),可能需要考虑兼容性问题。

总结

outline是一个非常实用的CSS属性,特别适合用于:

  • 实现焦点状态的视觉反馈
  • 创建不影响布局的边界效果
  • 设计交互式界面元素

合理使用outline可以提升用户体验,同时要注意保持适当的可访问性。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯之c++入门(六)【string(practice)】

目录 练习1:标题统计方法1:一次性读取整行字符,然后统计方法2:按照单词读取小提示: 练习2:石头剪子布练习3:密码翻译练习4:文字处理软件练习5:单词的长度练习6&#xff1…

Windows编程:下载与安装 Visual Studio 2010

本节前言 在写作本节的时候,本来呢,我正在写的专栏,是 MFC 专栏。而 VS2010 和 VS2019,正是 MFC 学习与开发中,可以使用的两款软件。然而呢,如果你去学习 Windows API 知识的话,那么&#xff0…

基于ansible部署elk集群

ansible部署 ELK部署 ELK常见架构 (1)ElasticsearchLogstashKibana:这种架构是最常见的一种,也是最简单的一种架构,这种架构通过Logstash收集日志,运用Elasticsearch分析日志,最后通过Kibana中…

(苍穹外卖)项目结构

苍穹外卖项目结构 后端工程基于 maven 进行项目构建,并且进行分模块开发。 1). 用 IDEA 打开初始工程,了解项目的整体结构: 对工程的每个模块作用说明: 序号名称说明1sky-take-outmaven父工程,统一管理依赖版本&…

达梦数据库从单主模式转换为主备模式

目录标题 达梦数据库单主转主备配置笔记前期准备服务器环境数据库安装磁盘空间 流程流程图说明基于脱机备份方式的单实例转主备流程图详细步骤说明 详细步骤1. 检查主库归档模式2. 配置主库配置文件dm.ini 文件dmmal.ini 文件dmarch.ini 文件 3. 备份主库数据库4. 备库配置新建…

计算机毕业设计hadoop+spark+hive民宿推荐系统 酒店推荐系统 民宿价格预测 酒店价预测 机器学习 深度学习 Python爬虫 HDFS集群

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…

接口对象封装思想及实现-笔记

目录 接口对象封装代码分层思想 封装案例封装Tpshop商城登录Tpshop商城登录参数化 接口自动化测试框架 接口对象封装 代码分层思想 分层思想:将普通思想分为两层,分为接口对象层和测试脚本层 接口对象层: 对接口进行封装,封装好之…

【LeetCode】5. 贪心算法:买卖股票时机

太久没更了,抽空学习下。 看一道简单题。 class Solution:def maxProfit(self, prices: List[int]) -> int:cost -1profit 0for i in prices:if cost -1:cost icontinueprofit_ i - costif profit_ > profit:profit profit_if cost > i:cost iret…

微信小程序调用企业微信客户服务插件联通企业微信客服

需求背景:用户在小程序页面点击按钮添加企业微信的客服 相关技术:基于uniapp开发的微信小程序 插件名称:企业微信客户服务插件「联系我」插件 - 文档 - 企业微信开发者中心 仔细阅读文档「联系我」插件 - 文档 - 企业微信开发者中心 以下是我的实例代码 1.首先先小程序管…

大数据数仓实战项目(离线数仓+实时数仓)2

目录 1.课程目标和课程内容介绍 2.数仓维度建模设计 3.数仓为什么要分层 4.数仓分层思想和作用 5.数仓中表的种类和同步策略 6.数仓中表字段介绍以及表关系梳理 订单表itcast_orders 订单明细表 itcast_order_goods 商品信息表 itcast_goods 店铺表 itcast_shops 商…

【Android】jni开发之导入opencv和libyuv来进行图像处理

做视频图像处理时需要对其进行水印的添加,放在应用层调用工具性能方面不太满意,于是当下采用opencvlibyuv方法进行处理。 对于Android的jni开发不是很懂,我的需求是导入opencv方便在cpp中调用,但目前找到的教程都是把opencv作为模…

理解 C 与 C++ 中的 const 常量与数组大小的关系

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 💯前言💯数组大小的常量要求💯C 语言中的数组大小要求💯C 中的数组大小要求💯为什么 C 中 const 变量可以作为数组大小💯进一步的…

小菜鸟系统学习Python第六天

1.函数: 2.全局变量加global(这里博主记混了,global使用的时候不能赋值,然后就错了两回) 3.内嵌函数 4.闭包 存在嵌套函数:在一个函数内部定义另一个函数。内部函数引用外部函数的变量:内部函数使用了外部函数作用域中的变量。外部函数返回内部函数&…

【STM32系列】利用MATLAB配合ARM-DSP库设计IIR数字滤波器(保姆级教程)

ps.源码放在最后面 设计FIR数字滤波器可以看这里:利用MATLAB配合ARM-DSP库设计FIR数字滤波器(保姆级教程) 设计IIR滤波器 MATLAB配置 设计步骤 首先在命令行窗口输入"filterDesigner",接着就会跳出以下界面&#xf…

WSL2中安装的ubuntu搭建tftp服务器uboot通过tftp下载

Windows中安装wsl2,wsl2里安装ubuntu。 1. Wsl启动后 1)Windows下ip ipconfig 以太网适配器 vEthernet (WSL (Hyper-V firewall)): 连接特定的 DNS 后缀 . . . . . . . : IPv4 地址 . . . . . . . . . . . . : 172.19.32.1 子网掩码 . . . . . . . .…

ES冷热数据分离配置

冷热数据是根据索引创建时间来进行迁移的。一旦迁移到冷数据节点,则无法再恢复成热数据,因为热数据节点中该索引已经没有分片存在了。 基于Docker搭建ES集群,并设置冷热数据节点 配置冷热数据迁移策略 PUT https://192.168.x.xx:19200/_ilm/policy/my…

Javaweb学习日记(十一)Mybatis-基础操作

一、环境准备 二、基础操作-删除 日志输出: SQL注入: sql注入:例如一个登录页面,需要满足账号密码同时匹配数据库内的数据才可登录(点击登录也页面在后台生成一条sql语句去检验是否正确(通过判断sql语句返…

小程序-基础加强

前言 这一节把基础加强讲完 1. 导入需要用到的小程序项目 2. 初步安装和使用vant组件库 这里还可以扫描二维码 其中步骤四没什么用 右键选择最后一个 在开始之前,我们的项目根目录得有package.json 没有的话,我们就初始化一个 但是我们没有npm这个…

Spring @PropertySource:让你的应用配置更加模块化和可维护

PropertySource注解在Spring中的作用,就像是给Spring应用配了一个“外部配置箱”。 想象一下,你在开发一个Spring应用时,有很多配置信息需要设置,比如数据库的连接信息、应用的某些功能开关等。如果这些信息都硬编码在代码中&…

尝试在Excel里调用硅基流动上的免费大语言模型

我个人觉得通过api而不是直接浏览器客户端聊天调用大语言模型是使用人工智能大模型的一个相对进阶的阶段。 于是就尝试了一下。我用的是老师木 袁进辉博士新创的硅基流动云上的免费的大模型。——虽然自己获赠了不少免费token,但测试阶段用不上。 具体步骤如下&am…