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…

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

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

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

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

计算机毕业设计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.前言 工欲善其事&…

最新Next14 路由处理器 Route Handlers

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

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中…

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;整理了这份电视盒子推…

class类默认导出,header字段在请求中的位置

这是封装好的&#xff0c;没封装的如下 如果没有用uni.post那么就是如下的结构 let header {Content-Type: application/x-www-form-urlencoded,tenant: MDAwMA, } request({url:/sal/formula/validFormula,method:post,data:{},header })

音乐免费下载mp3格式+音频格式转换+剪辑音频+合并音频教程

1.在qq音乐网页版搜索想要的歌曲 qq音乐网站&#xff1a;https://y.qq.com/ 如果你是vip可以直接下载vip的歌曲&#xff0c;如果不是选择不是vip的歌曲进行第一步的操作 2.点击播放进入页面后F12拿到音频地址 然后双击src里面的音频地址复制 网页新标签打开赋值的这个链接&a…

Gitlab服务器配置LDAP指导

ssh登录gitlab服务器&#xff1a;192.168.1.203修改配置文件 sudo su vim /etc/gitlab/gitlab.rb找到ldap_enabled和ldap_servers关键字并修改参数 保存配置文件并重新载入配置 gitlab-ctl reconfigure检查ldap相关配置是否成功&#xff08;列出前100个用户&#xff0c;若没…

BIM、建筑机器人、隧道工程施工关键技术

一、BIM简介 &#xff08;一&#xff09;BIM概念 BIM&#xff08;Building Information Modeling&#xff09;&#xff0c;建筑信息模型。该技术通过数字化手段&#xff0c;在计算机中建立虚拟建筑&#xff0c;该虚拟建筑提供从单一到完整、包含逻辑关系的建筑信息库。信息库…

基于全阶模型磁链观测器的异步电机矢量控制的学习

导读&#xff1a;异步电机直接矢量控制需要通过磁链观测器来获取同步角&#xff0c;用于控制过程中的坐标变换。同时&#xff0c;磁链观测器输出的估计磁链用于磁链PI调节器闭环控制。所以磁链观测器在矢量控制中显得尤为重要。 如果需要文章中对应的仿真模型&#xff0c;关注…

C语言实现输出9*9口诀

完整代码&#xff1a; // 输出9*9口诀 #include<stdio.h>int main(){//i代表九行for (int i 1; i < 10; i){//j代表每行有几列for (int j 1; j <i; j){printf("%d*%d%d ",j,i,i*j);}printf("\n");}return 0; } 运行截图&#xff1a;

安防监控EasyCVR视频汇聚平台使用海康SDK播放时,画面播放缓慢该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。安防视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、云存储、…

SpringBootWeb案例——Tlias智能学习辅助系统(2)

前一节已经实现了员工信息的条件分页查询以及删除操作。 这一节继续完成新增员工、文件上传、修改员工、配置文件的功能。 目录 新增员工文件上传简介本地存储阿里云OSS介绍与入门项目集成阿里云(难点) 修改员工查询回显修改员工 配置文件参数配置化(Value)yml配置文件Configur…

一文1700字使用Postman搞定各种接口token实战(建议收藏)

现在许多项目都使用jwt来实现用户登录和数据权限&#xff0c;校验过用户的用户名和密码后&#xff0c;会向用户响应一段经过加密的token&#xff0c;在这段token中可能储存了数据权限等&#xff0c;在后期的访问中&#xff0c;需要携带这段token&#xff0c;后台解析这段token才…