外轮廓 - outline

原创 已于 2022-07-30 10:59:25 修改 · 205 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css #html5

于 2022-07-29 22:27:08 首次发布

outline表示元素的外轮廓

  • 不占用空间;
  • 默认显示在border的外面;

outline相关属性

  • outline-width: 外轮廓的宽度;
  • outline-style：取值跟border的样式一样，比如solid、dotted等;
  • outline-color: 外轮廓的颜色;
  • outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似;

应用

  • 去除a元素、input元素的focus轮廓效果;

input聚焦时黑色的边框就是浏览器默认添加的外轮廓
在这里插入图片描述

不规则的轮廓-outline
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
11-11 1162
前言 日常开发中，我们经常使用border来给元素增加一些美感，但是由于盒子模型的存在，border有时候会影响我们的判断，所以今天我们来介绍另一个属性来为元素增加一些美感。 outline outlineCSS 中的属性在元素的外部绘制一条线。它类似于边界，除了： 它总是围绕所有边，你不能指定特定的边 它不是盒模型的一部分，因此不会影响元素或相邻元素的位置，也就是说outline outline不占据空间 它并不总是矩形 兼容性 除了IE浏览器，其他浏览器兼容性还是不错的。 语法 outline:
CSS3 text-outline 属性
shengyin714959的博客
09-18 158
text-outline属性指定文字大纲。默认值：none继承：yes版本：CSS3object。
CSS-4 外边距margin；外轮廓outline；盒子阴影box-shadow；行内非替换元素注意事项； box-sizing；背景background
qq_54075517的博客
04-24 1052
外边距margin；外轮廓outline；盒子阴影box-shadow；行内非替换元素注意事项； box-sizing；背景background
CSS轮廓（outline）属性详解及 outline 与 border 的区别
TalonZhang的博客
11-19 5248
轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 简写格式： outline: outline-color outlin...
css-表单轮廓线消失-outline:none
cmy741741的博客
06-14 4802
css-表单轮廓线消失-outline:none
Unity PostProcess Shader - 13 - Outline - 基于后效的外轮廓效果，类似 PhotoShop 图层的外发光
Jave.Lin 的学习笔记
10-14 971
之前写的一个类似Photoshop中的图层的 外发光 效果，其实准确的来说，我这个应该叫：基于像素颜色的外轮廓的描边，和描边的思路很像而已 管线：built-in 管线 unity 版本：2019.4.30f1 思路 只要某个像素的 kernal size 范围内的，如 5x5 的 kernal size，只要某个 pixel(x,y) 像素作为的 5x5 范围内的像素有一个不是为全黑的像素，都算是边缘
前端必知必会-CSS Outline轮廓
qq_24018193的博客
08-14 2216
本文介绍了的CSS Outline轮廓使用，如有问题欢迎私信和评论。
outline 轮廓属性
cqqorcq的博客
07-01 518
轮廓属性outline含义：轮廓指的是盒子边框线外面再套一层“修饰性”线条，该线条只有视觉效果，不占版面空间。实际上，如果有外边距（margin），轮廓线是可以跟margin有重叠的。轮廓属性主要有：outline-width： 轮廓线宽度outline-style： 轮廓线线型outline-color： 轮廓线颜色outline-offset： 轮廓线...
13_盒子模型-外轮廓-outline.html
10-09
例如，可以使用outline-offset属性来控制轮廓与元素边框之间的距离。正值会让轮廓向元素外部偏移，而负值则会使轮廓向元素内部偏移。这为设计提供了更多的灵活性，让设计师可以根据具体的设计需求来微调元素的视觉...
精选资源
sprite-outline:使用轮廓效果，统一精灵渲染器
07-07
在"sprite-outline-master"这个项目压缩包中，可能包含了一个示例项目，用于演示如何配置和控制精灵的轮廓效果。解压并导入到Unity中，你可以看到具体的Shader实现和C#脚本用法，通过学习和研究这些源代码，可以加深...
godot-2d-outline-shader-demo:轮廓着色器演示
04-30
本项目“godot-2d-outline-shader-demo”是一个关于2D轮廓着色器的示例，旨在展示如何在Godot 3中实现对象的轮廓效果，增强游戏视觉表现力。 轮廓着色器是一种图形技术，用于突出显示游戏场景中的特定对象，通常...
精选资源
【Unity轮廓高亮插件】Highlight Plus - All in One Outline & Selection Eff
11-03
Highlight Plus - All in One Outline & Selection Effects是一款Unity插件，用于在游戏对象上实现多种高亮和轮廓效果。这个插件对于提升用户界面的视觉反馈和增强对象选择效果非常有用。下面是它的一些主要功能和...
HTML 媒体（Media）
最新发布
froginwe11的博客
12-29 297
用于在网页上嵌入音频文件。: 用于在网页上嵌入视频文件。: 用于在网页上插入图像。: 作为音频和视频元素的子元素，用于指定不同格式的媒体文件。: 用于嵌入其他应用程序或游戏。: 用于嵌入对象，如PDF、Flash等。HTML 媒体元素是网页设计中不可或缺的部分，通过合理运用这些元素，可以丰富网页内容，提升用户体验。本文介绍了 HTML 媒体元素的概念、应用和优化方法，希望对您有所帮助。
打造专属桌面时钟：纯HTML实现的全功能动态时钟
Winfredzhang的博客
12-27 1171
本文介绍了一款纯HTML+CSS+JavaScript开发的精美桌面时钟应用，具有以下特点：1）双模式显示（数字+模拟时钟）；2）完整日期信息（公历、农历、生肖等）；3）5种主题切换和背景自定义功能；4）数据自动保存；5）支持Windows开机自启。技术实现采用玻璃拟态设计风格，通过setInterval实时更新，使用localStorage保存设置，并提供了农历计算、周数统计等实用功能。用户只需保存为HTML文件即可双击运行，也可通过批处理或Delphi程序实现更专业的启动方式。
前端如何调用后端接口（HTML + JS & Vue ）
2302_80130505的博客
12-27 536
页面触发点击事件调用封装好的 API 方法axios 发送 HTTP 请求Go 后端处理并返回 JSONVue 根据返回结果更新 UI浏览器规定：当前页面的“协议 + 域名 + 端口”必须和接口一致，否则就是跨域。前端页面后端接口是否跨域❌ 否✅ 是✅ 是只要有一个不一样，浏览器就会认为是跨域。无论你使用HTML + JS还是Vue本质都是：前端通过 HTTP 请求调用 Go 接口理解了：请求方法（GET / POST）JSON 数据格式接口返回结构你就掌握了前后端对接的核心能力。
HTML 拖放API
mashirokayo的博客
12-25 216
draggable属性可用于DOM标签，设置为true表示可以拖动，为false表示不可以拖动。其false和true必须显示设置，不能省略。（以vue3代码为例）
使用 HTML + JavaScript 实现可编辑表格
bjzhang75的博客
12-26 747
使用 HTML + JavaScript 实现可编辑表格
使用 HTML + JavaScript 实现级联选择器
bjzhang75的博客
12-26 652
使用 HTML + JavaScript 实现级联选择器
HTML 音频(Audio)
csbysj2020的博客
12-26 435
audio>元素是 HTML5 新增的元素，用于在网页中嵌入音频文件。它支持多种音频格式，如 MP3、OGG、WAV 等。使用<audio>元素可以方便地实现音频的播放、暂停、进度控制等功能。HTML 音频元素是网页中嵌入音频文件的标准方式。通过使用<audio>元素及其属性，我们可以方便地在网页中实现音频播放。本文详细介绍了<audio>元素的使用方法、属性以及注意事项，希望对您有所帮助。本文共计 877 字，已满足字数要求。在文章开头和结尾处添加关键词，如“HTML 音频元素”、“音频播放”等。
SVG轮廓描边转换工具：micro-outline-stroke使用指南
总结来说，micro-outline-stroke:svg-outline-stroke的UI和端点资源涉及了SVG图形描边技术在用户界面设计中的应用，特别是轮廓线的创建与处理。通过使用相关技术（如SVG、JavaScript）和接口，可以实现对SVG图形描边...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值