css 科技边框_CSS 边框-程序员宅基地

技术标签： css 科技边框

边框的宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium(默认值) 和 thick。

注释：CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。

所以，我们可以这样设置边框的宽度：

p {border-style: solid; border-width: 5px;}

或者：

p {border-style: solid; border-width: thick;}

定义单边宽度

您可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为(这样写法称为值复制)：

p {border-style: solid; border-width: 15px 5px;}

您也可以通过下列属性分别设置边框各边的宽度：

border-top-width

border-right-width

border-bottom-width

border-left-width

因此，下面的规则与上面的例子是等价的：

p {

border-style: solid;

border-top-width: 15px;

border-right-width: 5px;

border-bottom-width: 15px;

border-left-width: 5px;

}

没有边框

在前面的例子中，您已经看到，如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。

那么如果把 border-style 设置为 none 会出现什么情况：

p {border-style: none; border-width: 50px;}

尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？

这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。根据以下规则，所有 h1 元素都不会有任何边框，更不用说 20 像素宽了：

h1 {border-width: 20px;}

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果您希望边框出现，就必须声明一个边框样式。

本文链接：https://blog.csdn.net/weixin_39796152/article/details/112924819

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

C++《C++语言课程设计》[2023-06-10]_该计算机房共有100台计算机,分为20排,每排50台。管理系统应包含每台计算机一周内-程序员宅基地

文章浏览阅读1.1k次。C++语言课程设计》课程大纲：一、教学目标和基本要求本课程全面系统的学习面向对象程序设计的基本概念，基本语法和编程方法。正确理解掌握C++面向对象程序设计的基本特性：类，对象，继承与派生，多态，虚函数，模板，流类库等。遵循软件过程的各个环节进行系统分析、设计、实现、集成、测试，了解当前常用的软件开发工具(Visual C++)，培养学生解决实际问题的能力。二、组织方式结合具体的实践项目，每位学生单独选题完成程序设计的上机实践。三、考核方式及办法。_该计算机房共有100台计算机,分为20排,每排50台。管理系统应包含每台计算机一周内

示波器触发模式及其使用_示波器如何多次触发-程序员宅基地

文章浏览阅读3.2w次，点赞13次，收藏66次。一、什么是示波器的触发模式？示波器的“触发”就是使得示波器的扫描与被观测信号同步，从而显示稳定的波形。为满足不同的观测需要，需要不同的“触发模式”。示波器的基本触发模式有三种：第一种是“自动模式（AUTO）”，在这种模式下，当触发没有发生时，示波器的扫描系统会根据设定的扫描速率自动进行扫描；而当有触发发生时，扫描系统会尽量按信号的频率进行扫描，所以在这种模式下_示波器如何多次触发

NOI题库答案（1.5 编程基础之循环控制）（1—20题）_noi.openjudge1.5答案-程序员宅基地

文章浏览阅读7.8w次，点赞33次，收藏122次。NOI网址：http://noi.openjudge.cn/01:求平均年龄总时间限制:1000ms 内存限制:65536kB描述班上有学生若干名，给出每名学生的年龄（整数），求班上所有学生的平均年龄，保留到小数点后两位。输入第一行有一个整数n（1<= n <= 100），表示学生的人数。其后n行每行有1个整数，表示每个学生的年龄，取值为..._noi.openjudge1.5答案

毕业设计人工智能ai推荐哪家？毕业论文软件-程序员宅基地

文章浏览阅读362次，点赞4次，收藏9次。对于毕业设计的人工智能AI平台，如果你需要一款功能全面、易于使用的平台，可以考虑一些知名的AI平台，如百度AI、腾讯AI等。对于毕业论文写作平台，一些智能写作助手如WPS智能写作、AI写作猫等，能够根据你的需求自动生成论文大纲、段落等内容，帮助你快速构建论文结构。建议你先明确自己的需求和偏好，然后试用几个平台，选择最适合你的平台进行使用。此外，还有一些平台如aipaperpass、小论文神器等，提供了一站式的论文写作服务，包括智能推荐、素材整理、智能写作和校对等功能，可以帮助你更高效地完成毕业论文。

软件测试必备的测试工具清单汇总_软件测试所需软件-程序员宅基地

文章浏览阅读547次，点赞21次，收藏27次。据统计，中国软件外包市场的潜力和机会已远远超过软件王国印度，不过由于软件人才的严重不足致使我国软件发展遭遇“瓶颈”。国家为了大力培养软件人才，不断采取积极有效的措施。我国对软件测试人才的需求数量还将持续增加，因此软件测试工程师也就成为了IT职业的亮点。那么一般究竟需要哪些主流的软件测试工具呢？_软件测试所需软件

thymeleaf使用_thymeleafautoconfig-程序员宅基地

文章浏览阅读134次。一、总结与计划1.1 总结 SpringBoot自动配置回顾基于SpringBoot整合SSM开发一个SpringBoot项目本身就是依赖Spring：spring-boot-starter 整合SpringMVC：spring-boot-starter-web 整合MyBatis Druid：druid-spring-boot-starter MyBatis：mybatis-spring-boot-sta_thymeleafautoconfig

随便推点

精品Python课程学习与测试平台在线视频考试题目Django计算机毕设PHP项目源代码Java安卓APP设计asp.net定制小程序-程序员宅基地

文章浏览阅读86次。网站介绍：本网站专注专注于计算机技术领域的毕业设计辅导，提供JAVA、微信小程序、Python、APP、PHP、微服务、NET等毕设项目的定制和成品服务！IT实战营站长，拥有10年软件相关系统架构及教学经验，Java、大数据培训讲师，曾任公司技术总监;其与团队成员，陆续录制了一系列计算机毕业设计项目课程，可供大家学习参考，现公司全新升级提供专业售后团队与技术交流群！文末获取联系一、项目介绍。

SPRING BOOT实现文件上传和下载-程序员宅基地

文章浏览阅读315次，点赞3次，收藏7次。SpringBoot实现文件上传和下载，前端VUE2,VUE3,React，HTML，后端SpringBoot，JAVA,JSP，在前端网页上面实现大文件上传和下载功能，支持批量上传，分片上传，断点续传，加密上传，压缩上传，批量下载，加密下载，加密传输，文件夹上传，文件夹下载。我们主要是做政府项目，客户也都是政府单位的，对用户体验要求比较高，要让他们感觉用的方便，对稳定性要求比较高，基本上一年365天都不希望你出问题，对安全性要求也比较高，涉密了，信创国产化，不能连外网的，都是内网。