当前位置： 首页 > news >正文

CSS（九）——CSS 轮廓（outline）

news 2026/3/29 15:56:05

CSS 轮廓（outline）

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

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

让我们用一个图来看一下：

光看图还不行，接下来让我们看几个例子：

在元素周围画线

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;border-width: medium;border-color: #98bf21;}p.c {border-style: solid;border-width: 1px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>

运行结果：

设置轮廓的样式

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;outline-style: dotted;}p.c {border-style: solid;border-width: 1px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>

运行结果：

设置轮廓的颜色

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;outline-style: dotted;outline-color: #00ff00;}p.c {border-style: solid;border-width: 1px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>

运行结果：

设置轮廓的宽度

示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>操作示例</title><style>p.a {border: 1px solid red;outline: green dotted thick;}p.b {border-style: solid;outline-style: dotted;outline-color: #00ff00;}p.c {border-style: solid;outline-width: 3px;}</style>
</head><body><p class="a">飞流直下三千尺</p><p class="b">疑是银河落九天</p><p class="c">一日看尽长安花</p></body></html>

运行结果：

所有CSS 轮廓（outline）属性

属性说明值
outline在一个声明中设置所有的轮廓属性outline-color
outline-style
outline-width
inherit
outline-color设置轮廓的颜色color-name
hex-number
rgb-number
invert
inherit
outline-style设置轮廓的样式none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width设置轮廓的宽度thin
medium
thick
length
inherit

outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint

相关文章：

CSS（九）——CSS 轮廓（outline）

CSS 轮廓&#xff08;outline&#xff09; 轮廓&#xff08;outline&#xff09;是绘制于元素周围的一条线&#xff0c;位于边框边缘的外围&#xff0c;可起到突出元素的作用。 轮廓&#xff08;outline&#xff09;属性指定元素轮廓的样式、颜色和宽度。 让我们用一个图来看…...

编程日记 2024/7/30 0:37:35

Unity Timeline：构建复杂动画序列的利器

Unity的Timeline是一个强大的动画工具&#xff0c;它允许开发者创建复杂的动画序列&#xff0c;将动画、音频和事件整合到一个统一的时间轴上。Timeline的可视化编辑界面使得动画制作变得更加直观和灵活。本文将介绍Unity Timeline的基本概念、功能以及如何使用它来实现动画。 …...

编程日记 2024/7/30 0:34:32

C# 与C++ cli

cli CLI&#xff08;Command Line Interface&#xff09;是一种通过命令行界面与计算机系统进行交互的方式。它提供了一种以文本形式输入命令和接收系统输出的方法&#xff0c;用于执行各种操作和管理计算机系统。以下是CLI的详细解释&#xff1a; 一、定义与基本概念 定义&…...

编程日记 2024/7/30 0:33:31

Linux文件编程--打开及创建

...

编程日记 2024/7/30 0:29:28

Vue3点击按钮实现跳转页面并携带参数

前提&#xff1a;有完整的路由规则 1.源页面 <template><div><h1>源页面</h1><!--通过js代码跳转--><template #default"scope"><button click"toTargetView(scope.row)">点击跳转携带参数</button><…...

编程日记 2024/7/30 0:27:26

探索Linux-1-虚拟机远程登陆XShell6远程传输文件Xftp6

Linux是什么&#xff1f; Linux是一个开源的操作系统内核&#xff0c;由林纳斯托瓦兹&#xff08;Linus Torvalds&#xff09;于1991年首次发布。它基于Unix操作系统&#xff0c;但提供了更多的自由和灵活性。Linux内核是操作系统的核心部分&#xff0c;负责管理系统资源、处理…...

编程日记 2024/7/30 0:25:24

SpringBoot中使用监听器

1.定义一个事件 /*** 定义事件* author hrui* date 2024/7/25 12:46*/ public class CustomEvent extends ApplicationEvent {private String message;public CustomEvent(Object source, String message) {super(source);this.message message;}public String getMessage() …...

编程日记 2024/7/30 0:23:22

mybatise全接触-面试宝典-知识大全

1 . 简述什么是Mybatis和原理 &#xff1f; Mybatis工作原理&#xff1a; &#xff08;1&#xff09;Mybatis是一个半ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;它内部封装了JDBC&#xff0c;加载驱动、创建连接、创建statement等繁杂的过程&#xff0c;开发者…...

编程日记 2024/7/30 0:19:18

Catalyst优化器:让你的Spark SQL查询提速10倍

目录 1 逻辑优化阶段 2.1 逻辑计划解析 2.2 逻辑计划优化 2.2.1 Catalys的优化过程 2.2.2 Cache Manager优化 2 物理优化阶段 2.1 优化 Spark Plan 2.1.1 Catalyst 的 Join 策略 2.1.2 如何决定选择哪一种 Join 策略 2.2 Physical Plan 2.2.1 EnsureRequirements 规则 3 相关文…...

编程日记 2024/7/30 0:18:17

【Hot100】LeetCode—416. 分割等和子集

目录 题目1- 思路2- 实现⭐152. 乘积最大子数组——题解思路 3- ACM 实现 题目 原题连接&#xff1a;416. 分割等和子集 1- 思路 理解为背包问题 思路&#xff1a; 能否将均分的子集理解为一个背包&#xff0c;比如对于 [1,5,11,5]&#xff0c;判断能否凑齐背包为 11 的容量…...

编程日记 2024/7/30 0:16:16

前端开发知识-vue

大括号里边放键值对&#xff0c;即是一个对象。 一、vue可以简化前端javascript的操作。 主要特点是可以实现视图、数据的双向绑定。 使用vue主要分为三个步骤&#xff1a; 1.javascript中引入vue.js 可以src中可以是vue的网址&#xff0c;也可以是本地下载。 2.在javasc…...

编程日记 2024/7/30 0:15:14

【嵌入式硬件】快衰减和慢衰减

1.引语 在使用直流有刷电机驱动芯片A4950时，这款芯片采用的是PWM控制方式，我发现他的正转、反转有两种控制方式，分别是快衰减和慢衰减。 2.理解 慢衰减：相当于加在电机(感性原件)两端电压消失，将电机两端正负短接。 快衰减：相当于加在电机(感性原件)两端电压消失，将电机…...

编程日记 2024/7/30 0:03:00

C语言 | Leetcode C语言题解之第275题H指数II

题目&#xff1a; 题解&#xff1a; int hIndex(int* citations, int citationsSize) {int left 0, right citationsSize - 1;while (left < right) {int mid left (right - left) / 2;if (citations[mid] > citationsSize - mid) {right mid - 1;} else {left mi…...

编程日记 2024/7/30 0:01:59

速盾：网络安全和 CDN 之间的关系是怎样的？

网络安全和内容交付网络&#xff08;CDN&#xff09;之间有着密切的关系。网络安全主要涉及保护网络和系统免受各种威胁和攻击&#xff0c;而CDN是一种用于提供更快速、高效和可靠的内容交付服务的技术。在当今数字化和云计算时代&#xff0c;网络安全和CDN之间的关系变得更加紧…...

编程日记 2024/7/29 23:58:56

数据库安全：MySQL安全配置，MySQL安全基线检查加固

「作者简介」：冬奥会网络安全中国代表队，CSDN Top100，就职奇安信多年，以实战工作为基础著作 《网络安全自学教程》，适合基础薄弱的同学系统化的学习网络安全，用最短的时间掌握最核心的技术。 这一章节我们需要知道MySQL的安全基线标准和加固方式。 MySQL基线检查 1、更新…...

编程日记 2024/7/29 23:57:55

【SpringBoot】参数传递

1.定义URL变量 RequestMapping("/user/{username}") ResponseBody public String userProfile(PathVariable String username){ return "user:"username; } 2.定义多个URL变量 RequestMapping("/user/{username}/blog/{blogId}") Response…...

编程日记 2024/7/29 23:54:52

Unity 骨骼动画(Skinned Mesh Renderer): 角色动画的高级渲染

在Unity中&#xff0c;骨骼动画(Skinned Mesh Renderer)是一种用于高级角色动画渲染的组件。它允许开发者将复杂的3D模型和动画应用到游戏角色上&#xff0c;实现逼真的视觉效果。本文将探讨Skinned Mesh Renderer的基本概念、使用方法以及如何优化性能。 Skinned Mesh Render…...

编程日记 2024/7/29 23:53:50

花几千上万学习Java，真没必要！（三十四）

1、泛型类&#xff1a; 测试代码&#xff1a; 创建一个Box类; package settest.com; public class Box<T> { // T stands for "Type" - T是一个占位符&#xff0c;用于表示具体的类型 // 类的内部可以使用T作为类型声明变量 private T t; // 构造方法&am…...

编程日记 2024/7/29 23:52:49

【代码】Python3｜Scrapy框架初探（汽车之家大连市二手车车辆数据爬取、清洗与可视化）

本篇主要是整个项目的介绍&#xff0c;没提到太多琐碎的技术细节&#xff0c;以后有空的话会整理一下 Scrapy 和原生爬虫的差异&#xff0c;还有它坑人的一些地方&#xff0c;单发出来。 开源地址&#xff1a;https://github.com/shandianchengzi/car_home_spider 使用说明&a…...

编程日记 2024/7/29 23:49:47

C#中的new以及类

new关键字的用法 实例化对象&#xff1a;使用 new 关键字可以创建一个类的实例。例如&#xff1a; ​ MyClass obj new MyClass(); 指定构造函数&#xff1a;如果类有多个构造函数&#xff0c;可以使用 new 关键字指定使用哪一个构造函数来创建对象。例如&#xff1a; ​ MyC…...

编程日记 2024/7/29 23:48:46

如何用RecastNavigation构建完整的游戏AI导航系统：从入门到实战

如何用RecastNavigation构建完整的游戏AI导航系统&#xff1a;从入门到实战 【免费下载链接】recastnavigation Navigation-mesh Toolset for Games 项目地址: https://gitcode.com/gh_mirrors/re/recastnavigation 想要为你的游戏打造智能的AI导航系统吗&#xff1f;Re…...

编程新知 2026/3/29 15:31:59

LFM2.5-1.2B-Thinking-GGUF案例分享：为国产操作系统社区生成的发行版更新日志摘要

LFM2.5-1.2B-Thinking-GGUF案例分享&#xff1a;为国产操作系统社区生成的发行版更新日志摘要 1. 模型简介 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;专为低资源环境优化设计。该模型采用GGUF格式存储&#xff0c;配合llama.cpp运行时&…...

编程新知 2026/3/29 15:19:54

NanoPC-T6开发板实战：手把手教你制作并烧录RK3588的Recovery镜像（含完整分区解析）

NanoPC-T6开发板实战&#xff1a;手把手教你制作并烧录RK3588的Recovery镜像&#xff08;含完整分区解析&#xff09; 在嵌入式开发领域&#xff0c;能够独立制作和烧录Recovery镜像是一项至关重要的技能。对于使用NanoPC-T6开发板和RK3588芯片的开发者来说&#xff0c;掌握这一…...

编程新知 2026/3/29 14:15:22

OpenClaw成本分析：GLM-4.7-Flash长期运行的Token消耗与优化

OpenClaw成本分析&#xff1a;GLM-4.7-Flash长期运行的Token消耗与优化 1. 为什么需要关注OpenClaw的Token消耗&#xff1f; 去年冬天&#xff0c;当我第一次在本地部署OpenClaw对接GLM-4.7-Flash模型时&#xff0c;完全没意识到这个"小助手"会成为我每月账单上的&…...

编程新知 2026/3/29 13:49:14

终极Android投屏指南：用escrcpy实现电脑无缝控制手机

终极Android投屏指南&#xff1a;用escrcpy实现电脑无缝控制手机 【免费下载链接】escrcpy 优雅而强大的跨平台 Android 设备控制工具&#xff0c;基于 Scrcpy 的 Electron 应用,支持无线连接和多设备管理,让您的电脑成为 Android 的完美伴侣。 项目地址: https://gitcode.co…...

编程新知 2026/3/29 13:32:43

终极指南：如何用jQuery.Flipster打造惊艳的3D封面流效果

终极指南&#xff1a;如何用jQuery.Flipster打造惊艳的3D封面流效果 【免费下载链接】jquery-flipster Responsive, CSS3, touch-enabled jQuery Coverflow plugin. 项目地址: https://gitcode.com/gh_mirrors/jq/jquery-flipster 还在为网站轮播图太单调而烦恼吗&#…...

编程新知 2026/3/29 12:50:17

离散裂隙注浆与COMSOL的应用

离散裂隙注浆 comsol裂隙注浆模拟这件事&#xff0c;搞过岩土工程的都懂——看着像往裂缝里灌水泥&#xff0c;实际操作起来比煮一锅意大利面还容易翻车。COMSOL在这块儿的优势就像给工程师开了透视挂&#xff0c;尤其是处理随机分布的离散裂隙时&#xff0c;能直接把三维地质结…...

编程新知 2026/3/29 12:18:08

掌握微信聊天记录数据备份与隐私保护全攻略

掌握微信聊天记录数据备份与隐私保护全攻略 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeChatMsg 在数字化社交…...

编程新知 2026/3/29 12:08:03

Czkawka：用Rust构建的跨平台重复文件清理完整解决方案

Czkawka&#xff1a;用Rust构建的跨平台重复文件清理完整解决方案 【免费下载链接】czkawka 一款跨平台的重复文件查找工具&#xff0c;可用于清理硬盘中的重复文件、相似图片、零字节文件等。它以高效、易用为特点&#xff0c;帮助用户释放存储空间。 项目地址: https://git…...

编程新知 2026/3/29 11:03:08

3个步骤解决老旧系统Python支持难题：Windows 7及以上系统兼容性解决方案

3个步骤解决老旧系统Python支持难题&#xff1a;Windows 7及以上系统兼容性解决方案 【免费下载链接】PythonVista Python 3.9 installers that support Windows 7 SP1 and Windows Server 2008 R2 项目地址: https://gitcode.com/gh_mirrors/py/PythonVista 在企业办公…...

编程新知 2026/3/29 7:17:23