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

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)属性:

相关文章:

CSS 边框、轮廓线

一、CSS边框&#xff1a; CSS边框属性允许指定一个元素边框的样式和颜色。 1&#xff09;、边框样式&#xff1a;border-style属性用来定义边框的样式&#xff0c;border-style值&#xff1a; 2&#xff09;、边框宽度&#xff1a;border-width属性用于指定边框宽度。指定变宽…...

Transformer架构 完整的处理流程

Transformer 是由多层的 Encoder 和 Decoder 构成的。每一层的 Encoder 和 Decoder 都包含了多头自注意力机制&#xff08;Multi-head Self Attention&#xff09;、前馈神经网络&#xff08;Feed Forward&#xff09;和添加及归一化&#xff08;Add & Norm&#xff09;。特…...

git and svn 行尾风格配置强制为lf

git CLI配置&#xff1a; // 提交时转换为LF&#xff0c;检出时转换为CRLF git config --global core.autocrlf true // 提交时转换为LF&#xff0c;检出时不转换 git config --global core.autocrlf input // 提交检出均不转换 git config --global core.autocrlf f…...

达梦数据库答案

1、 创建数据库实例&#xff0c;到/dm8/data下&#xff0c;数据库名&#xff1a;DEMO&#xff0c;实例名DEMOSERVER&#xff08;10分&#xff09; [dmdbadmServer ~]$ cd /dm8/tool [dmdbadmServer tool]$ ./dbca.sh1、 簇大小32&#xff0c;页大小16&#xff0c;登录密码&…...

基于SSM的楼房销售系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

Blender做一个小凳子学习笔记

文章目录 创建椅座椅子腿靠背渲染 本文是这个B站视频的学习笔记&#xff1a;【Blender】爆肝两个月&#xff01;拜托三连了&#xff01;这绝对是全B站最用心的&#xff08;没有之一&#xff09;Blender 3D建模零基础入门 创建椅座 首先&#xff0c;需要了解其左上角和右上角的…...

Maven简介

一、Maven模型 二、模型实现 三、对应代码项目介绍...

后端工程化 | SpringBoot 知识点

文章目录 [SpringBoot] 后端工程化1 需求2 开发流程3 RequestController 类&#xff08;操作类&#xff09;3.1 简单参数&#xff08;形参名和请求参数名一致&#xff09;3.2 简单参数&#xff08;形参名和请求参数名不一致&#xff09;3.3 复杂实体参数3.4 数组参数3.5 集合参…...

Oracle(15)Managing Users

目录 一、基础知识 1、Users and Security 用户和安全 2、Database Schema 3、Checklist for Creating Users创建用户步骤 二、基础操作 1、创建一个用户 2、OS Authentication 操作系统身份验证 3、Dropping a User 删除用户 4、Getting User Information 获取用户信…...

自动化测试(Java+eclipse)教程

webdriver环境配置 1.下载chromedriver到本地&#xff08;一定要选择和自己浏览器相对应的版本chromedriver下载地址&#xff09; 2.加入到环境变量path中 webdriver工作原理 创建web自动化测试脚本 1.Maven项目创建 File->New->project->(搜索maven)选择maven pr…...

ThreadFactory 实例创建方式

匿名内部类 private final Executor executor;{ThreadFactory threadFactory new ThreadFactory() {Overridepublic Thread newThread(Runnable r) {Thread t new Thread(r);t.setDaemon(true);return t;}};executor Executors.newFixedThreadPool(shops.size(), threadFac…...

【自动化测试】Pytest框架 —— 跳过测试和失败重试

1、Pytest跳过测试用例 自动化测试执行过程中&#xff0c;我们常常出现这种情况&#xff1a;因为功能阻塞&#xff0c;未实现或者环境有问题等等原因&#xff0c;一些用例执行不了&#xff0c; 如果我们注释掉或删除掉这些测试用例&#xff0c;后面可能还要进行恢复操作&#…...

python 时间加法 输出t分钟后的时间

题目&#xff1a; 现在时间是a点b分&#xff0c;请问t分钟后&#xff0c;是几点几分&#xff1f; 输入&#xff1a; 第一行包含一个整数a 第二行包含一个整数b 第三行包含一个整数t 其中&#xff0c;0≤a≤23&#xff0c;0≤b≤59&#xff0c;0≤t&#xff0c;t分钟后还…...

51单片机-串口通信

文章目录 前言1.基础介绍2.串口实战3.4. 前言 1.基础介绍 常见1&#xff0c;2&#xff0c;3,电源 常用方式1 fosc外部晶振 2.串口实战 3. 4....

JAVA微信端医院3D智能导诊系统源码

医院智能导诊系统利用高科技的信息化手段&#xff0c;优化就医流程。让广大患者有序、轻松就医&#xff0c;提升医疗服务水平。 随着人工智能技术的快速发展&#xff0c;语音识别与自然语言理解技术的成熟应用&#xff0c;基于人工智能的智能导诊导医逐渐出现在患者的生活视角中…...

考研408-计算机网络 第二章-物理层学习笔记及习题

第二章 物理层 一 通信基础 1.1 物理层基本概念 1.1.1 认识物理层 物理层目的&#xff1a;解决如何在连接各种计算机的传输媒体上传输数据比特流&#xff0c;而不是具体的传输媒体。 物理层主要任务&#xff1a;确认与传输媒体接口有关的一些特性&#xff0c;需要进行定义标…...

鸿蒙开发工具的汉化

1、下载汉化包 汉化插件下载地址&#xff1a;Chinese (Simplified) Language Pack / 中文语言包 - IntelliJ IDEs Plugin | Marketplace 百度网盘下载地址&#xff1a;链接&#xff1a;百度网盘 请输入提取码 DevEco Studio是基于IDEA223版本&#xff0c;下载汉化包时请注意…...

14:00面试,14:06就出来了,问的问题有点变态。。。。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到5月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…...

如何使用 NFTScan NFT API 在 zkSync 网络上开发 Web3 应用

zkSync 是由 Matter Labs 创建的&#xff0c;是一个以用户为中心的 zk rollup 平台&#xff0c;它是以太坊的第 2 层扩展解决方案&#xff0c;使用 zk-rollups 作为扩展技术&#xff0c;与 optimistic rollups 一样&#xff0c;zk-rollups 将会汇总以太坊主网上的交易并将交易证…...

rust从0开始写项目-读取配置文件

一个项目初始化&#xff0c;总是有几个元素是必不可少的、框架、日志、配置文件等等基本元素。 今天我们主要介绍下怎么获取配置并在全局使用 更多好文。vx. golang技术实验室 专注分享 golang、rust等多语言、中间件及大数据相关内容 Part1一、读取cargo.toml文件内容 Cargo.t…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.

ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #&#xff1a…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

Spring AOP代理对象生成原理

代理对象生成的关键类是【AnnotationAwareAspectJAutoProxyCreator】&#xff0c;这个类继承了【BeanPostProcessor】是一个后置处理器 在bean对象生命周期中初始化时执行【org.springframework.beans.factory.config.BeanPostProcessor#postProcessAfterInitialization】方法时…...

路由基础-路由表

本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之间交互是需要借助三层设备的&#xff0c;这些设备具备路由能力&#xff0c;能够实现数据的跨网段转发。 路由是数据通信网络中最基…...

数据挖掘是什么?数据挖掘技术有哪些?

目录 一、数据挖掘是什么 二、常见的数据挖掘技术 1. 关联规则挖掘 2. 分类算法 3. 聚类分析 4. 回归分析 三、数据挖掘的应用领域 1. 商业领域 2. 医疗领域 3. 金融领域 4. 其他领域 四、数据挖掘面临的挑战和未来趋势 1. 面临的挑战 2. 未来趋势 五、总结 数据…...