CSS 边框、轮廓线

一、CSS边框:

CSS边框属性允许指定一个元素边框的样式和颜色。

1)、边框样式:border-style属性用来定义边框的样式,border-style值:

2)、边框宽度:border-width属性用于指定边框宽度。指定变宽宽度由两种方法:指定长度值;使用3个关键字(thick、medium、thin)。示例:

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

3)、边框颜色:

border-color属性用于设置边框的颜色,可以通过name(指定颜色的名称)、RGB(指定RGB值)、HEX(指定颜色的十六进制值)设定颜色。还可以设置边框的颜色为transparent。border-color不能单独使用,必须先使用border-style来设置边框的样式。示例:

P

{

border-style:solid;

border-color:red;

}

4)、边框单独设置各边:

在CSS中,可以指定不同的侧面不同的边框。示例:

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

border-style属性可以有1-4个值:

★ border-style:dotted solid double dashed;(上边框是 dotted,右边框是 solid,底边框是 double,左边框是 dashed)。

★ border-style:dotted solid double(上边框是 dotted,左、右边框是 solid,底边框是 double)。

★ border-style:dotted solid(上、底边框是 dotted,右、左边框是 solid)。

★ border-style:dotted(四面边框是 dotted)。

CSS边框属性:

属性

描述

border

简写属性,用于把针对四个边的属性设置在一个声明。

border-style

用于设置元素所有边框的样式,或者单独地为各边设置边框样式。

border-width

简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。

border-color

简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。

border-bottom

简写属性,用于把下边框的所有属性设置到一个声明中。

border-bottom-color

设置元素的下边框的颜色。

border-bottom-style

设置元素的下边框的样式。

border-bottom-width

设置元素的下边框的宽度。

border-left

简写属性,用于把左边框的所有属性设置到一个声明中。

border-left-color

设置元素的左边框的颜色。

border-left-style

设置元素的左边框的样式。

border-left-width

设置元素的左边框的宽度。

border-right

简写属性,用于把右边框的所有属性设置到一个声明中。

border-right-color

设置元素的右边框的颜色。

border-right-style

设置元素的右边框的样式。

border-right-width

设置元素的右边框的宽度。

border-top

简写属性,用于把上边框的所有属性设置到一个声明中。

border-top-color

设置元素的上边框的颜色。

border-top-style

设置元素的上边框的样式。

border-top-width

设置元素的上边框的宽度。

border-radius

设置圆角的边框。

二、CSS轮廓属性:

轮廓(outline)是绘制元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。

1)、在元素周围画线:

p

{

border:1px solid red;

outline:green dotted thick;

}

2)、设置轮廓样式:

<style>

p {border:1px solid red;}

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;}

</style>

3)、设置轮廓颜色:

p

{

border:1px solid red;

outline-style:dotted;

outline-color:#00ff00;

}

4)、设置轮廓宽度:

p.one

{

border:1px solid red;

outline-style:solid;

outline-width:thin;

}

p.two

{

border:1px solid red;

outline-style:dotted;

outline-width:3px;

}

CSS轮廓(outline)属性:

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

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

相关文章

Python - Windows下使用Python脚本同步一个文件夹下的所有文件到另一个文件夹下

Python同步文件 在Windows下使用Python脚本同步一个文件夹下的所有文件到另一个文件夹下 示例代码 import logging import os import shutildef sync_files(src_file_path, dst_dir_path, exclude_list):try:if not os.path.exists(src_file_path):os.makedirs(src_file_pat…

RISC Zero ZKP协议中的商多项式

1. 引言 前序博客见&#xff1a; Reed-Solomon Codes及其与RISC Zero zkVM的关系 RISC Zero zkVM主要针对可验证计算&#xff0c;其具有隐私和可扩展属性&#xff1a; Reed-Solomon Codes及其与RISC Zero zkVM的关系博客中指出&#xff1a;RISC Zero中的Reed-Solomon Code…

django+drf+vue 简单系统搭建 (2) - drf 应用

按照本系统设置目的&#xff0c;是为了建立一些工具用来处理简单的文件。 1. 准备djangorestframework 关于drf的说明请参见&#xff1a;Django REST Framework教程 | 大江狗的博客 本系列直接使用drf的序列化等其他功能。 安装 conda install djangorestframework conda i…

Spire.Office for .NET 8.10.2 同步更新-Crk

Spire.Office for .NET是 E-iceblue 提供的企业级 Office .NET API 的组合。它包括Spire.Doc、Spire.XLS、Spire.Spreadsheet、Spire.Presentation、Spire.PDF、Spire.DataExport、Spire.OfficeViewer、Spire.PDFViewer、Spire.DocViewer、Spire.Barcode和Spire.Email。Spire.O…

OceanBase 如何通过日志观测冻结转储流程?

本文旨在通过日志解析 OceanBase 的冻结转储流程&#xff0c;以其冻结检查线程为切入点&#xff0c;以租户&#xff08;1002&#xff09;的线程名为例。 作者&#xff1a;陈慧明&#xff0c;爱可生测试工程师&#xff0c;主要参与 DMP 和 DBLE 自动化测试项目。 爱可生开源社区…

在MacBook上实现免费的PDF文件编辑

之前我想对PDF文件进行简单处理&#xff08;比如删页面、添空白页、调整页面顺序&#xff09;&#xff0c;要么是开wps会员【花钱贵】&#xff0c;下载&#xff08;盗版&#xff09;Adobe Acrobat【macOS不好下载】&#xff0c;要么用福昕阅览器登陆学生账号&#xff08;学校买…

MySQL的存储过程

存储过程&#xff1a;是一组为了完成特定功能的sql语句的集合&#xff0c;类似于函数 写好一个存储过程之后&#xff0c;我们可以像函数一样随时可以调用sql的集合 复杂的&#xff0c;需要很多sql语句联合执行完成的任务 存储过程在执行上比sql语句执行速度快&#xff0c;效率…

错误未找到concrt140.dll最详细的解决方法与修复教程

作为一名长期活跃电脑计算机上的用户&#xff0c;我非常理解找不到concrt140.dll导致无法继续执行代码的困扰。这个问题可能会影响到许多软件的工作进度&#xff0c;甚至影响到项目的完成。在这里&#xff0c;我将分享我对于这个问题的理解和修复方法&#xff0c;希望能对大家有…

劳务派遣公司如何通过网盘与境外用户共享文件数据

中外企业合作、跨国公司已成为趋势&#xff0c;相应的文件数据共享问题应运而生。数据作为现代全球经济的命脉&#xff0c;如果文件数据无法高效流转&#xff0c;就会成为了企业发展的桎梏。 而传统常用的文件协作方式一般是邮件沟通&#xff0c;不过在日常使用过程中&#xf…

jenkins原理篇——成员权限管理

大家好&#xff0c;我是蓝胖子&#xff0c;前面几节我讲述了jenkins的语法以及我是如何使用jenkins对测试和正式环境进行发布的。但正式环境使用jenkins还有一点很重要&#xff0c;那就是权限管理。正式环境的权限往往不能对所有人开放&#xff0c;以及要做到每次发布都是谁在操…

什么是数据可视化,为什么数据可视化很重要?

数据可视化是数据的图形表示&#xff0c;可以帮助人们更轻松地理解和解释复杂的信息。它涉及创建数据的视觉表示&#xff0c;例如图表、图形、地图和其他视觉元素&#xff0c;以传达数据中的见解、模式和趋势。数据可视化是将原始数据转化为可操作知识的关键工具。 以下是数据…

【数据结构】树与二叉树(三):二叉树的定义、特点、性质及相关证明

文章目录 5.1 树的基本概念5.1.1 树的定义5.1.2 森林的定义5.1.3 树的术语5.1.4 树的表示 5.2 二叉树5.2.1 二叉树1. 定义2. 特点3. 性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉…

【机芯智能】智能公元(语音模块)

语音模块配置 进入语音模块智能公元官网&#xff0c;配置词条和识别后的串口输出指令. 记录下相关指令以及上图的识别词条&#xff0c;方便SDK烧写后的调试 SDK烧写 4. SDK 先和电脑调试助手配合&#xff0c;验证数据

web框架与Django

web应用程序 什么是web Web应用程序是一种可以通过Web访问的应用程序&#xff0c;程序的最大好处是用户很容易访问应用程序&#xff0c;用户只需要有浏览器即可&#xff0c;不需要再安装其他软件 应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序&#xff0c;也就是说这…

竞赛选题 深度学习疫情社交安全距离检测算法 - python opencv cnn

文章目录 0 前言1 课题背景2 实现效果3 相关技术3.1 YOLOV43.2 基于 DeepSort 算法的行人跟踪 4 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习疫情社交安全距离检测算法 ** 该项目较为新颖&#xff0c;适合作为竞赛…

11月11日|欢迎参加Sui Meetup泰国活动!

现在是Sui基金会与泰国Sui社区见面的时候啦&#xff0c;我们诚邀每个人参加今年最大的Sui Meetup泰国活动&#xff0c;主题是“Summer Paradise&#xff08;夏日天堂&#xff09;”。在活动中&#xff0c;您将会见到来自Sui基金会、ContributionDAO、KX、Inspex、Cryptomind、A…

企业单位SSL证书

对于企业网站来说&#xff0c;建立一个安全可信的在线环境至关重要。在该过程中&#xff0c;选择适合的SSL证书起着关键作用。SSL证书不仅可以加密敏感数据传输&#xff0c;还可以展示您的企业身份和信誉。本文将为您介绍几款适合企业网站使用的SSL证书&#xff0c;助您确保网站…

Spring Boot 统一处理功能

目录 1.用户登陆权限验证 1.1 每个方法验证 1.2 Spring AOP 用户统一登陆验证 1.3 拦截器 1.3.1 自定义拦截器 1.3.2 将自定义拦截器配置到系统设置中&#xff0c;并且设置拦截规则 1.3.3 排除所有的静态资源 1.4 登录拦截器&#xff08;练习&#xff09; 1.5 拦截器原…

MGEF 记录添加(物料主数据有一个存储区域的选项英文显示Haz. material number(危险物料号))

物料主数据有一个存储区域的选项英文显示Haz. material number&#xff08;危险物料号&#xff09;&#xff09; 看了一下对应的时MGEF-STOFF 刚开始在后台配置里面加好了需要的项目发现物料主数据还是选不到 找了半天&#xff0c;查了一堆资料。没有找到MGEF 是在哪里增加配置…

Android 深色模式切换适配

在Android11上测试 1&#xff0c;把需要适配的资源文件复制一份后缀加上-night&#xff0c;里面就放置变主题后的资源 2&#xff0c;两个主题一个白&#xff0c;一个黑&#xff0c;分别放置在对应的valuse-styles.xml中 <style name"Theme.LaserMachPor" parent&…