CSS（九）——CSS 轮廓（outline）
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 轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 让我们用一个图来看…...
Unity Timeline：构建复杂动画序列的利器
Unity的Timeline是一个强大的动画工具，它允许开发者创建复杂的动画序列，将动画、音频和事件整合到一个统一的时间轴上。Timeline的可视化编辑界面使得动画制作变得更加直观和灵活。本文将介绍Unity Timeline的基本概念、功能以及如何使用它来实现动画。 …...
C# 与C++ cli
cli CLI（Command Line Interface）是一种通过命令行界面与计算机系统进行交互的方式。它提供了一种以文本形式输入命令和接收系统输出的方法，用于执行各种操作和管理计算机系统。以下是CLI的详细解释： 一、定义与基本概念 定义&…...
Linux文件编程--打开及创建
...
Vue3点击按钮实现跳转页面并携带参数
前提：有完整的路由规则 1.源页面 <template><div><h1>源页面</h1><!--通过js代码跳转--><template #default"scope"><button click"toTargetView(scope.row)">点击跳转携带参数</button><…...
探索Linux-1-虚拟机远程登陆XShell6远程传输文件Xftp6
Linux是什么？ Linux是一个开源的操作系统内核，由林纳斯托瓦兹（Linus Torvalds）于1991年首次发布。它基于Unix操作系统，但提供了更多的自由和灵活性。Linux内核是操作系统的核心部分，负责管理系统资源、处理…...
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() …...
mybatise全接触-面试宝典-知识大全
1 . 简述什么是Mybatis和原理 ？ Mybatis工作原理： （1）Mybatis是一个半ORM（对象关系映射）框架，它内部封装了JDBC，加载驱动、创建连接、创建statement等繁杂的过程，开发者…...
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 相关文…...
【Hot100】LeetCode—416. 分割等和子集
目录 题目1- 思路2- 实现⭐152. 乘积最大子数组——题解思路 3- ACM 实现 题目 原题连接：416. 分割等和子集 1- 思路 理解为背包问题 思路： 能否将均分的子集理解为一个背包，比如对于 [1,5,11,5]，判断能否凑齐背包为 11 的容量…...
前端开发知识-vue
大括号里边放键值对，即是一个对象。 一、vue可以简化前端javascript的操作。 主要特点是可以实现视图、数据的双向绑定。 使用vue主要分为三个步骤： 1.javascript中引入vue.js 可以src中可以是vue的网址，也可以是本地下载。 2.在javasc…...
【嵌入式硬件】快衰减和慢衰减
1.引语 在使用直流有刷电机驱动芯片A4950时，这款芯片采用的是PWM控制方式，我发现他的正转、反转有两种控制方式，分别是快衰减和慢衰减。 2.理解 慢衰减：相当于加在电机(感性原件)两端电压消失，将电机两端正负短接。 快衰减：相当于加在电机(感性原件)两端电压消失，将电机…...
C语言 | Leetcode C语言题解之第275题H指数II
题目： 题解： 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…...
速盾：网络安全和 CDN 之间的关系是怎样的？
网络安全和内容交付网络（CDN）之间有着密切的关系。网络安全主要涉及保护网络和系统免受各种威胁和攻击，而CDN是一种用于提供更快速、高效和可靠的内容交付服务的技术。在当今数字化和云计算时代，网络安全和CDN之间的关系变得更加紧…...
数据库安全：MySQL安全配置，MySQL安全基线检查加固
「作者简介」：冬奥会网络安全中国代表队，CSDN Top100，就职奇安信多年，以实战工作为基础著作 《网络安全自学教程》，适合基础薄弱的同学系统化的学习网络安全，用最短的时间掌握最核心的技术。 这一章节我们需要知道MySQL的安全基线标准和加固方式。 MySQL基线检查 1、更新…...
【SpringBoot】参数传递
1.定义URL变量 RequestMapping("/user/{username}") ResponseBody public String userProfile(PathVariable String username){ return "user:"username; } 2.定义多个URL变量 RequestMapping("/user/{username}/blog/{blogId}") Response…...
: 角色动画的高级渲染)
Unity 骨骼动画(Skinned Mesh Renderer): 角色动画的高级渲染
在Unity中，骨骼动画(Skinned Mesh Renderer)是一种用于高级角色动画渲染的组件。它允许开发者将复杂的3D模型和动画应用到游戏角色上，实现逼真的视觉效果。本文将探讨Skinned Mesh Renderer的基本概念、使用方法以及如何优化性能。 Skinned Mesh Render…...
花几千上万学习Java，真没必要！（三十四）
1、泛型类： 测试代码： 创建一个Box类; package settest.com; public class Box<T> { // T stands for "Type" - T是一个占位符，用于表示具体的类型 // 类的内部可以使用T作为类型声明变量 private T t; // 构造方法&am…...
【代码】Python3｜Scrapy框架初探（汽车之家大连市二手车车辆数据爬取、清洗与可视化）
本篇主要是整个项目的介绍，没提到太多琐碎的技术细节，以后有空的话会整理一下 Scrapy 和原生爬虫的差异，还有它坑人的一些地方，单发出来。 开源地址：https://github.com/shandianchengzi/car_home_spider 使用说明&a…...
C#中的new以及类
new关键字的用法 实例化对象：使用 new 关键字可以创建一个类的实例。例如： MyClass obj new MyClass(); 指定构造函数：如果类有多个构造函数，可以使用 new 关键字指定使用哪一个构造函数来创建对象。例如： MyC…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况，可以通过以下几种方式模拟或触发： 1. 增加CPU负载 运行大量计算密集型任务，例如： 使用多线程循环执行复杂计算（如数学运算、加密解密等）。运行图…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
使用Spring AI和MCP协议构建图片搜索服务
目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...
使用python进行图像处理—图像滤波（5）
图像滤波是图像处理中最基本和最重要的操作之一。它的目的是在空间域上修改图像的像素值，以达到平滑（去噪）、锐化、边缘检测等效果。滤波通常通过卷积操作实现。 5.1卷积(Convolution)原理 卷积是滤波的核心。它是一种数学运算，…...
深入理解 C++ 左值右值、std::move 与函数重载中的参数传递
在 C 编程中，左值和右值的概念以及std::move的使用，常常让开发者感到困惑。特别是在函数重载场景下，如何合理利用这些特性来优化代码性能、确保语义正确，更是一个值得深入探讨的话题。 在开始之前，先提出几个问题&…...
【Vue】scoped+组件通信+props校验
【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性， 令样式只作用于当前组件的标签 作用：防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...
使用VMware克隆功能快速搭建集群
自己搭建的虚拟机，后续不管是学习java还是大数据，都需要集群，java需要分布式的微服务，大数据Hadoop的计算集群，如果从头开始搭建虚拟机会比较费时费力，这里分享一下如何使用克隆功能快速搭建一个集群 先把…...
android计算器代码
本次作业要求实现一个计算器应用的基础框架。以下是布局文件的核心代码： <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"andr…...
＜ 自用文 OS有关 新的JD云主机＞ 国内 京东云主机 2C4G 60G 5Mb 498/36月 Ubuntu22
攒了这么久，废话一些： 前几周很多事儿，打算回北京，开个清真的德克萨斯烤肉店，写了一篇 ： ＜ 自用文 Texas style Smoker ＞ 美式德克萨斯烟熏炉 从设计到实现 （第一部分&…...