CSS 边框、轮廓线

news2024/12/28 5:01:28

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

TCP编程及基础知识

一、端口号 为了区分一台主机接收到的数据包应该转交给哪个进程来进行处理&#xff0c;使用端口号来区分TCP端口号与UDP端口号独立端口用两个字节来表示 2byte&#xff08;65535个&#xff09; 众所周知端口&#xff1a;1~1023&#xff08;1~255之间为众所周知端口&#xff…

软件测试/测试开发丨Python安装指南(macOS)

点此获取更多相关资料 下载 Python 解释器 下载地址: https://www.Python.org/downloads/macos 通过下载页面&#xff0c;可以在该页面上看到下载链接。 下载完成后会得到 Python-3.10.11-macos11.pkg安装文件 。 安装 Python 解释器 双击Python-3.10.11-macos11.pkg文件&a…

Vue3指令

Vue 指令&#xff08;Directives&#xff09;是 Vue.js 的一项核心功能&#xff0c;它们可以在 HTML 模板中以 v- 开头的特殊属性形式使用&#xff0c;用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。 Vue 指令是带有前缀 v- 的特殊 HTML 属性&#xff0c;它赋…

Linux操作系统中软件安装:用RPM包管理器安装软件步骤

安装软件的一般步骤如下&#xff1a; 1.打开终端&#xff0c;作为root用户或使用sudo命令获取管理员权限。 2.使用RPM命令进行软件包的安装。例如&#xff0c;使用“rpm -ivh 软件包名称.rpm”命令来安装软件包&#xff0c;其中“-i”表示安装&#xff0c;“-v”表示显示详细安…

【入门Flink】- 07Flink DataStream API【万字篇】

DataStream API 是 Flink 的核心层 API。一个 Flink 程序&#xff0c;其实就是对DataStream的各种转换。 代码基本上都由以下几部分构成&#xff1a; 执行环境&#xff08;Execution Environment&#xff09; 1&#xff09;创建执行环境StreamExecutionEnvironment StreamExe…

【启扬方案】基于RK3568核心板的激光打标机应用解决方案

激光打标机是一种利用激光技术进行标记和刻字的设备&#xff0c;作为激光技术应用的一个细分领域&#xff0c;是最早引入工业市场的一类激光装备&#xff0c;它采用激光束在工件表面进行刻印、打标&#xff0c;常用于工业生产中的物料标识、产品追溯、防伪标记等应用&#xff0…

centos7安装mysql-阿里云服务器

1.背景 2.安装 2.1.下载安装包 wget https://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm2.2.安装mysql rpm -ivh mysql57-community-release-el7-8.noarch.rpm 3.安装mysql服务 3.1.进入目录 首先进入cd /etc/yum.repos.d/目录 cd /etc/yum.repos.d/ 3.…

Netty 高性能原因之一 采用了高性能的NIO 模式

java IO简介 I/O 全称Input/Output&#xff0c;即输入/输出&#xff0c;通常指数据在内部存储器和外部存储器或其他周边设备之间的输入/输出。 涉及 I/O 的操作&#xff0c;不仅仅局限于硬件设备的读写&#xff0c;还要网络数据的传输。无论是从磁盘中读写文件&#xff0c;还…

【广州华锐互动】VR综合布线虚拟实验教学系统

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐渗透到各个领域&#xff0c;为人们的生活和工作带来了前所未有的便利。在建筑行业中&#xff0c;VR技术的应用也日益广泛&#xff0c;尤其是在综合布线方面。 广州华锐互动开发的VR综合布线虚拟实…

百度上线“文心一言”付费版本,AI聊天机器人市场竞争加剧

原创 | 文 BFT机器人 百度不愧是我国AI技术领域的先行者&#xff0c;每年致力于人工智能领域取得技术产品的突破和创新。据爆料称&#xff0c;百度的文心一言有突破了新境界&#xff0c;开创了文心大模型4.0会员版本。从线上的to C产品到试水商业化&#xff0c;百度都是争先走…

Python的requests库爬取商城优惠券

首先&#xff0c;我们需要了解要抓取的网页的结构和数据格式。在这个例子中&#xff0c;我们使用Python的requests库来发送HTTP请求&#xff0c;并使用BeautifulSoup库来解析HTML内容。 import requests from bs4 import BeautifulSoup然后&#xff0c;我们需要使用requests库的…

LeetCode | 160. 相交链表

LeetCode | 160. 相交链表 O链接 我们这里有两个问题&#xff0c;一是判断是否相交&#xff0c;二是找交点 思路一&#xff1a; 暴力求解 A链表所有节点依次取B链表找一遍&#xff08;时间复杂度是O(N^2)&#xff09; struct ListNode *getIntersectionNode(struct ListNod…

QT not in executable format:file truncated

今天在调研串口打印机的时候出现的&#xff0c;串口打印机有sdk&#xff0c;自己qt的编辑器用的 MinGW 64&#xff0c;编译出现次错误 出现这个错误&#xff0c;主要是sdk和编译器的版本位数不一致。 修改方法&#xff1a;把MinGW64 改为MinGW32&#xff0c;不过这个根据使用的…

为什么说制造企业需要部署MES管理系统

在数字化浪潮席卷的今天&#xff0c;每个企业都期望通过新技术、新模式来优化自身的运营。这其中&#xff0c;MES管理系统成为了不少企业的首选。那么&#xff0c;为何企业需要部署MES管理系统&#xff1f;又该如何搭建MES管理系统呢&#xff1f; 一、企业缘何钟情于MES系统&am…

LeetCode-20-有效的括号

1.我的暴力解法 class Solution {public boolean isValid(String s) {Stack<Character> stknew Stack<Character>();int i0;//奇数直接不可能是匹配的if(s.length()%2!0)return false;for (;i<s.length();i){if(s.charAt(i)(){stk.push(();}else if(s.charAt(i…

NVM安装node后提示没有对应npm包(即:无法将“npm”项识别为 cmdlet、函数、脚本文件)

背景 windows11 node版本降低到v12.22.12后&#xff0c;执行&#xff1a;nvm -v npm -v npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果 包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。 所在位置 …

【bug-maven】(一)java: 错误: 不支持发行版本 5 (二):java: 错误: 无效的源发行版:15

【bug-maven】&#xff08;一&#xff09;java: 错误: 不支持发行版本 5 &#xff08;二&#xff09;&#xff1a;java: 错误: 无效的源发行版&#xff1a;15 &#xff08;一&#xff09;java: 错误: 不支持发行版本 5 报错截图&#xff1a; 出错原因&#xff1a; 打开Projec…

GoLong的学习之路(番外)如何使用依赖注入工具:wire

我为什么要直接写番外呢&#xff1f;其原因很简单。项目中会使用&#xff0c;其实在这里大家就可以写一些项目来了。 依赖注入的工具本质思想其实都大差不差。无非控制反转和依赖注入。 文章目录 控制反转为什么需要依赖注入工具 wire的概念提供者&#xff08;provider&#x…

易云维®工厂能耗管理平台系统方案,保证运营质量,推动广东制造企业节能减排

我国《关于完整准确全面贯彻新发展理念推进碳达峰碳中和工作的实施意见》出台&#xff0c;提出了推进碳达峰碳中和工作的总体目标。到2025年&#xff0c;广东具备条件的地区、行业和企业率先实现碳达峰&#xff0c;为全省实现碳达峰、碳中和奠定坚实基础&#xff1b;2030年前实…

51单片机+SIM800C(GSM模块)实现短信发送功能

一、前言 本项目利用51单片机和SIM800C GSM模块实现短信发送功能。短信作为一种广泛应用的通信方式&#xff0c;在许多领域具有重要的作用&#xff0c;如物联网、安防系统、远程监控等。通过将51单片机与SIM800C GSM模块相结合&#xff0c;可以实现在各种应用场景下的短信通信…