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

CSS学习记录07

CSS轮廓

轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。

CSS拥有如下轮廓属性:

  • outline-style
  • outline-color
  • outline-width
  • outline-offset
  • outline

注意:轮廓与边框不同。不同之处在于:轮廓是在元素边框之外绘制的,并且可能与其他内容重叠。同样,轮廓也不是元素尺寸的一部分;元素的总宽度和高度不受轮廓线宽度的影响。

CSS轮廓样式

outline-sytle 属性指定轮廓的样式,并可设置如下值:

  • dotted - 定义点状的轮廓。
  • dashed - 定义虚线的轮廓。
  • solid - 定义实线的轮廓。
  • double - 定义双线的轮廓。
  • groove - 定义3D凹槽轮廓。
  • ridge - 定义3D凸曹轮廓。
  • inset - 定义3D凹边轮廓。
  • outset - 定义3D凸边轮廓。
  • none - 定义无轮廓。
  • hidden - 定义隐藏的轮廓。

举例:

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

 注意:除非设置了outline-style属性,否则其他轮廓属性都不会有任何作用。

CSS轮廓宽度

outline-width 属性指定轮廓的宽度,并可设置如下值之一:

  • thin(通常为1px)
  • medium(通常为3px)
  • thick(通常为5px)
  • 特定尺寸(以px、pt、cm、em计)

举例:

p.ex1 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: thin;
}p.ex2 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: medium;
}p.ex3 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: thick;
}p.ex4 {border: 1px solid black;outline-style: solid;outline-color: red;outline-width: 4px;
}

CSS轮廓颜色 

outline-color 属性用于设置轮廓的颜色。

可以通过以下方式设置染色:

  • name - 指定颜色名, 例如:“red"
  • HEX - 指定十六进制值 例如:”#ff0000"
  • RGB - 指定RGB值, 例如:“rgb(255,0,0)"
  • HSL - 指定HSL值, 例如:”hsl(0,100%,50%)"
  • invert - 执行颜色反转(无论是什么颜色背景,都可确保轮廓可见)

举例:

p.ex3 {border: 2px solid black;outline-style: outset;outline-color: grey;
}

CSS轮廓简写 

outline 属性是用于设置以下各个轮廓属性的简写属性:

  • outline-width
  • outline-style(必需)
  • outline-color

从上面的列表中,outline属性可指定一个、两个或三个值。值的顺序无关重要。

举例:

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

CSS轮廓偏移

outline-offset属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

举例:

p {margin: 30px;background: yellow;border: 1px solid black;outline: 1px solid red;outline-offset: 25px;
}

所有CSS轮廓属性

属性描述
outline简写属性,在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color设置轮廓的颜色。
outline-offset指定轮廓与元素的边缘或边框之间的空间。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。

相关文章:

CSS学习记录07

CSS轮廓 轮廓是在元素周围绘制的一条线,在边框之外,以凸显元素。 CSS拥有如下轮廓属性: outline-styleoutline-coloroutline-widthoutline-offsetoutline 注意:轮廓与边框不同。不同之处在于:轮廓是在元素边框之外…...

喆塔科技携手国家级创新中心,共建高性能集成电路数智化未来

集创新之力成数智之塔 近日,喆塔科技与国家集成电路创新中心携手共建“高性能集成电路数智化联合工程中心”并举行签约揭牌仪式。出席此次活动的领导嘉宾包含:上海市经济和信息化委员会、上海市集成电路行业协会、复旦大学微电子学院、国家集成电路创新中…...

基于单片机的汽车雨刷器装置

摘要 下雨天时道路十分模糊,能见度非常低,司机分散注意力去手动打开雨刷器开关会非常危险。据统计,全世界雨天行车的车祸事故有7%是因为司机手动打开雨刷分心导致的。为了减小司机因为手动打开雨刷发生车祸的概率,所以…...

013-SpringBoot 定义优雅的全局异常处理方式

SpringBoot 定义优雅的全局异常处理方式 一、概述二、定义全局异常接口三、定义全局异常枚举四、定义全局基础异常五、定义全局基础业务异常六、定义全局返回七、定义全局返回工厂八、全局异常处理九、实体类十、Controller十一、效果展示一、概述 在日常项目开发中,异常是常…...

nginx 网页正常访问 F5 404

前端打包部署完,无论pc-web或h5-wap,访问正常,一刷新就会404。 解决方案: 在项目的nginx子配置文件中,加上以下代码 try_files $uri $uri/ /index.html;...

Idea Spring Initializr没有 Java 8选项解决办法

问题描述 在使用IDEA中的Spring Initializr创建新项目时,Java 版本近可选择Java17,21 。不能选择Java8;SpringBoot 版本也只有 3.x 问题原因 Spring 官方( https://start.spring.io/)不再提供旧版本的初始化配置 解决方案 方案 1 使用阿里…...

【Leetcode Top 100】104. 二叉树的最大深度

问题背景 给定一个二叉树 r o o t root root,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 数据约束 树中节点的数量在 [ 0 , 1 0 4 ] [0, 10 ^ 4] [0,104] 区间内。 − 100 ≤ N o d e . v a l ≤ 100 -100 \le Nod…...

C#实现一个HttpClient集成通义千问-开发前准备

集成一个在线大模型(如通义千问),来开发一个chat对话类型的ai应用,我需要先了解OpenAI的API文档,请求和返回的参数都是以相关接口文档的标准进行的 相关文档 OpenAI API文档 https://platform.openai.com/docs/api-…...

使用ssh免密登录实现自动化部署rsync+nfs+lsync(脚本)

单机一键部署sshrsyncnfslsync 执行准备 主机信息 主机角色外网IP内网IP主机名nfs、lsync10.0.0.31176.16.1.31nfs客户端10.0.0.7176.16.1.7web01rsync、nfs10.0.0.41172.16.1.41backup 秘钥信息 #web01可以免密连接nfs和backup [rootweb01 ~]# ssh-keygen [rootweb01 ~]#…...

若依集成更好用的easyexcel

背景 若依使用的是apach poi并在此基础上进行封装apach poi的原生的api是很复杂的,若依简化了了此操作apach poi的上传速率和下载速率都是没有优化的,依赖于文件大小的限制在此前提下,如果没法满足客户的需求(超大型文件的上传&am…...

去除背景 学习笔记

目录 rembg rembg 安装: pip install rembg import os from glob import glob from rembg import remove from argparse import ArgumentParser from PIL import Image if __name__ __main__:parser ArgumentParser()parser.add_argument(--path, typestr, re…...

我们来学mysql -- 隔离级别简介(原理篇)

隔离级别 别记题记隔离级别后记系列文章 别记 烧香拜佛要是有用,还需要我们来过吗…从个人情感角度,巴沙尔阿萨德 辜负了东大对他的期望他可是从正门踏进了灵隐寺 俄乌战争即将进入第三年(此时202412)此时的加沙正成为以色列建国…...

机器学习(4)Kmeans算法

1、简述聚类分析的重要性及其在机器学习中的应用   聚类分析,作为机器学习领域中的一种无监督学习方法,在数据探索与知识发现过程中扮演着举足轻重的角色。它能够在没有先验知识或标签信息的情况下,通过挖掘数据中的内在结构和规律&#xf…...

Oracle之表空间迁移

问题背景:一个数据表随着时间的累积,导致所在表空间占用很高,里面历史数据可以清除,保留近2个月数据即可 首先通过delete删除了2个月以前的数据。 按网上的教程进行空间压缩,以下sql在表所在用户执行: -- 允许表重新…...

域渗透入门靶机之HTB-Cicada

easy难度的windows靶机 信息收集 端口探测 nmap -sT --min-rate 10000 -p- 10.10.11.35 -oA ./port 发现开放了53,88,389等端口,推测为域控 进一步信息收集,对爆破的端口进行更加详细的扫描 小tips:对于众多的端口&…...

ue5 motion matching

ue5.5 gameanimationsample 先看动画蓝图 核心两个node 第一个是根据数据选择当前的pose 第二个是缓存一段历史记录,为第一个node选择的时候提供数据。 在animinstance的update方法中 每帧都更新这个函数,每帧更新trajectory的数据 看看第一个node的…...

【从零开始的LeetCode-算法】383. 赎金信

给你两个字符串:ransomNote 和 magazine ,判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以,返回 true ;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使用一次。 示例 1: 输入&#…...

记录模板学习(持续更新)

目的: 学习C模板的编写,使用模板类包装一个可调用对象 可调用对象包括:普通函数, lambda表达式, 类成员函数 可以参考到QtConcurrent::run的实现,可以看到这个函数有非常多重载,其中可以接受类…...

Android hid 数据传输(device 端 )

最近一直在处理hid 数据需求,简而言之就是两台设备直接可以通过usb 线互相传递数据。 项目架构 为什么Device 端要采用HID(人机接口设备)的方式发送和接收数据呢? 主要是速度快,举个例子,就是鼠标移动&am…...

MaxEnt模型在物种分布模拟中如何应用?R语言+MaxEnt模型融合物种分布模拟、参数优化方法、结果分析制图与论文写作

目录 第一章 以问题导入的方式,深入掌握原理基础 第二章 常用数据检索与R语言自动化下载及可视化方法 第三章 R语言数据清洗与特征变量筛选 第四章 基于ArcGIS、R数据处理与进阶 第五章 基于Maxent的物种分布建模与预测 第六章 基于R语言的模型参数优化 第七…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中,高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司,近期做出了一个重大技术决策:弃用长期使用的 Nginx,转而采用其内部开发…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

深度学习水论文:mamba+图像增强

🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机,因为在使用过程中发现 Airsim 对外部监控相机的描述模糊,而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置,最后在源码示例中找到了,所以感…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业,那宇树科技(Unitree)必须名列其榜。 最近,宇树科技的一项新变动消息在业界引发了不少关注和讨论,即: 宇树向其合作伙伴发布了一封公司名称变更函称,因…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析,分为​​已启动​​和​​未启动​​两种场景: 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​:当其他组件(如Activity、Service)通过ContentR…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文通过代码驱动的方式,系统讲解PyTorch核心概念和实战技巧,涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

git: early EOF

macOS报错: Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...