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

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

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

相关文章

2023-11-07 C语言链接库编译命令

点击 <C 语言编程核心突破> 快速C语言入门 C语言链接库编译命令 前言一、引入库文件, 包括头文件和lib库二、简单示例总结 前言 要解决问题: 一般没有给新手的链接库编译命令学习资料, 然而, 不解决这个问题, 调用库就能折腾到劝退, 我近日回答一个问题, 很简单, 调用…

【 Docker: 数据卷挂载】

背景 Docker只提供了容器运行的必备依赖&#xff0c;但是一些编辑等操作的依赖是不支持的&#xff0c;如vi操作容器内部文件、将静态资源拷贝到容器内来等。 docker pull nginx docker run -d -p 81:80 --namemynginx -v D:/docker/nginx/www:/usr/share/nginx/www -v D:/dock…

Angular 中的数据交互GET POST

1 Angular get 请求数据 Angular5.x 以后 get、post 和和服务器交互使用的是 HttpClientModule 模块 在 app.module.ts 中引入 HttpClientModule 并注入 import {HttpClientModule} from angular/common/http imports: [ BrowserModule, HttpClientModule ]在用到的地方引入…

柯桥英语培训,商务英语学习,常用口语

欢迎各位小伙伴来到 ——“每个单词我都认识&#xff0c;但我又不认识整个短语”的时候啦&#xff01; “dog”是“狗” “breakfast”是早餐 那“a dogs breakfast”是“狗的早餐”&#xff1f; 狗听了都摇头。 a dogs breakfast是一句英文俚语&#xff0c;指的是无序、混…

要做CMMI认证?什么是CMMI资质认证?

CMMI官方为美国CMMI Institute。CMMI资质主要包括三种&#xff1a;研发模型CMMI for Development资质&#xff0c;服务模型CMMI for Serivce资质&#xff0c;采购模型CMMI for Acquisition资质。在所有已过级企业中有99.5%以上的企业为研发模型CMMI for Development资质&#x…

Evaluating Large Language Models: A Comprehensive Survey

本文是LLM系列文章&#xff0c;针对《Evaluating Large Language Models: A Comprehensive Survey》的翻译。 评估大型语言模型&#xff1a;一项综合调查 摘要1 引言2 分类和路线图3 知识和能力评估4 对齐评估5 安全评估6 专业LLM评估7 评估组织8 未来方向9 结论 摘要 大型语…

LeetCode | 面试题 02.02. 返回倒数第 k 个节点

LeetCode | 面试题 02.02. 返回倒数第 k 个节点 OJ链接 思路&#xff1a;定义两个快慢指针&#xff0c;让快指针先提前走k个节点&#xff0c;然后再让慢结点和快结点一起走&#xff0c;当快指针 NULL时&#xff0c;慢指针就是倒数第k个节点 代码如下&#xff1a; int kthT…

java list set map日子记录

List集合 概念 是一个容器,作用为存放多个数据,通常用来替代数组 特点 只能存放引用类型 所有集合都来自于java.util包 List , Set , Map都是接口 List的存储特点 有序,有下标,元素可以重复 List的常用实现类 ArrayList (常用) JDK1.2 底层数组实现 查询快,增删慢 线程不…

计算机毕业设计java+springboot+vue的旅游攻略平台

项目介绍 本系统结合计算机系统的结构、概念、模型、原理、方法&#xff0c;在计算机各种优势的情况下&#xff0c;采用JAVA语言&#xff0c;结合SpringBoot框架与Vue框架以及MYSQL数据库设计并实现的。员工管理系统主要包括个人中心、用户管理、攻略管理、审核信息管理、积分…

STM32Cube +VSCode开发环境搭建

STM32Cube VSCode开发环境搭建 0.前言一、各种方式对比1.STM32CubeMX CLion2.STM32CubeIDE VSCode STM32 VSCode Extension3.VSCode EIDE插件 二、STM32CubeIDE VSCode STM32 VSCode Extension环境搭建1.需要安装的软件2.相关配置3.编译测试 三、总结 0.前言 工欲善其事&…

解决:openpyxl.utils.exceptions.IllegalCharacterError

使用python写excel遇到非法字符&#xff0c;本来用的是openpyxl发现有报错&#xff0c;查了一下xlsxwriter可以自动处理非法字符&#xff0c;写起来更方便。 注意使用前安装xlsxwriter: pip install xlsxwriterimport pandas as pddef write_to_xlsx(data, filename):# 表头he…

最新Next14 路由处理器 Route Handlers

四、使用Next路由处理程序 Next.js Route Handlers I. Next中路由处理程序是什么 ​ 路由处理程序是在用户访问站点路由时执行的功能。它们负责处理对定义的URL或路由的传入HTTP请求&#xff0c;以生成所需的数据。从本质上讲&#xff0c;当用户访问Next.js应用程序中的特定页…

vim手册(vim cheatsheet)

vim手册&#xff08;vim cheatsheet&#xff09; 1. 命令模式 1). 移动光标 在命令模式下&#xff0c;可以使用以下命令来移动光标&#xff1a; - h&#xff1a;向左移动一个字符。 - j&#xff1a;向下移动一行。 - k&#xff1a;向上移动一行。 - l&#xff1a;向右移动一个…

Docker 从构建开始导出一个镜像

docker build docker build命令用于从Dockerfile创建一个镜像。它的基本格式如下&#xff1a; docker build [OPTIONS] PATH | URL | -这里的PATH是Dockerfile所在的路径&#xff0c;URL是一个Git仓库地址&#xff0c;-表示从标准输入读取Dockerfile。 docker build命令的一…

chatglm3-6b部署及微调

chatglm3-6b部署及微调 modelscope: https://modelscope.cn/models/ZhipuAI/chatglm3-6b/filesgithub: https://github.com/THUDM/ChatGLM3镜像: ubuntu20.04-cuda11.8.0-py38-torch2.0.1-tf2.13.0-1.9.4v100 16G现存 单卡 安装 软件依赖 pip install --upgrade pippip ins…

使用IDEA让文本对比不在变的困难

文章目录 前言操作1、IDEA与电脑磁盘任意文件的比较2、项目内部的文件比较3、剪切板比较4、IDEA本地历史比较5、IDEA版本历史对比 前言 在日常实际开发当中我们常常会对一些代码或内容进行比对查看是否有差异&#xff0c;这个时候不需要借用第三方比对插件&#xff0c;在IDEA中…

2022 icpc杭州站 C. No Bug No Game - 背包dp

题面 分析 能拿整个 p i p_i pi​的就拿整个的&#xff0c;不能拿了可以拿一部分的&#xff0c;因此可以分成0和1两种情况&#xff0c;0表示拿整个的&#xff0c;1表示还可以拿部分的&#xff0c;两种情况放在一起做一遍01背包&#xff0c;找到最大价值。 代码 #include &l…

git笔记

git常见命令 git init :初始化本地仓库&#xff0c;会生成一个.git文件&#xff0c;该文件用于管理和追踪该本地仓库&#xff0c;只有在git仓库下的文件才能被管理! git config user. name "用户名” git config user. email " 邮箱” git config -1 :列出当前git仓库…

老李测评:网络电视盒子哪个好?双十一必看电视盒子推荐

大家好&#xff0c;我是测评人老李&#xff0c;双十一大促期间我们都在买买买&#xff0c;本期老李要分享的数码产品推荐是电视盒子&#xff0c;为了推荐更客观&#xff0c;老李购入了各平台热销的十几款电视盒子&#xff0c;通过两周的对比后&#xff0c;整理了这份电视盒子推…

java后端debug排查问题思路

问题排查思路 这里说的是主要是debug以及线上问题排查的思路. 解决问题的步骤 确认环境、确定问题、复现问题、查看日志、定位问题 、解决问题 确认环境/url/参数 确认是哪个环境。 是开发环境&#xff0c;测试环境&#xff0c;还是生产环境。 如果问题是在测试环境&…