css边框修饰

一、设置线条样式

通过 border-style 属性设置,可选择的一些属性如下:

  • dotted:点线

  • dashed:虚线

  • solid:实线

  • double:双实线

效果如下:

二、设置边框线宽度

① 通过 border-width 整体设置上下左右边框

border-width: 5px;

效果如下:

② 分别设置边框四个方向的宽度

  • border-left-width: 设置左边框宽度

  • border-right-width: 设置右边框宽度

  • border-top-width: 设置上边框宽度

  • border-bottom-width: 设置下边框宽度

border-left-width: 20px;
border-top-width: 15px;
border-right-width: 10px;
border-bottom-width: 5px;

效果如下:

三、设置边框颜色

① 通过 border-color 属性设置四个方向的边框颜色

border-color: red;

 效果如下:

② 分别设置四个方向的边框颜色

  • border-left-color: 设置左边框颜色

  • border-top-color: 设置上边框颜色

  • border-right-color: 设置右边框颜色

  • border-bottom-color:设置下边框颜色

border-left-color: red;
border-top-color: green;
border-right-color: blue;
border-bottom-color: blueviolet;

 效果如下:

四、设置圆角边框

① 通过 border-radius 属性整体设置四个圆角

border-radius: 50px;

效果如下:

② 分别设置四个方向的圆角边框

  • border-top-left-radius: 设置左上角圆角

  • border-bottom-left-radius: 设置左下角圆角

  • border-top-right-radius: 设置右上角圆角

  • border-bottom-right-radius: 设置右下角圆角

 border-top-left-radius: 50px;border-bottom-left-radius: 20px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;

效果如下:

注意:修饰边框时,边框线条样式、边框宽度都要设置才会显示出来!!

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

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

相关文章

OpenGL入门002——顶点着色器和片段着色器

文章目录 一些概念坐标转换阶段顶点着色器片段着色器VBOVAO 实战简介main.cppCMakeLists.txt最终效果 一些概念 坐标转换阶段 概述: 模型空间、世界空间、视图空间和裁剪空间是对象在3D场景中经历的不同坐标变换阶段。每个空间对应渲染管道的一个步骤,…

LeetCode 684.冗余连接:拓扑排序+哈希表(O(n)) 或 并查集(O(nlog n)-O(nα(n)))

【LetMeFly】684.冗余连接:拓扑排序哈希表(O(n)) 或 并查集(O(nlog n)-O(nα(n))) 力扣题目链接:https://leetcode.cn/problems/redundant-connection/ 树可以看成是一个连通且 无环 的 无向 图。 给定往…

C语言指针与一维数组 Java动态初始化与常见问题(越界问题)

1./*int main(void) { int a[5] { 10,20,30,40,50 };//数组间的元素地址相连的 int* p; printf("a代表的地址:%d\n", a);//数组首个元素的地址 printf("a1代表的地址:%d\n", a 1);//偏移数组 printf("a2…

2023年SEO趋势分析与未来发展展望

内容概要 在2023年的数字营销环境中,搜索引擎优化(SEO)依然扮演着关键角色。随着技术的不断演进和用户需求的变化,SEO趋势也在不断变化。首先,核心算法的更新已开始影响网站排名,搜索引擎越来越注重网站内…

面试经典 150 题:189、383

189. 轮转数组 【参考代码】 class Solution { public:void rotate(vector<int>& nums, int k) {int size nums.size();if(1 size){return;}vector<int> temp(size);//k k % size;for(int i0; i<size; i){temp[(i k) % size] nums[i];}nums temp; }…

Linux云计算 |【第五阶段】CLOUD-DAY8

主要内容&#xff1a; 掌握DaemonSet控制器、污点策略&#xff08;NoSchedule、Noexecute&#xff09;、Job / CronJob资源对象、掌握Service服务、服务名解析CluterIP&#xff08;服务名自动发现&#xff09;、&#xff08;Nodeport、Headless&#xff09;、Ingress控制器 一…

智能网联汽车:人工智能与汽车行业的深度融合

内容概要 在这个快速发展的时代&#xff0c;智能网联汽车已经不再是科幻电影的专利&#xff0c;它正在悄然走进我们的日常生活。如今&#xff0c;人工智能&#xff08;AI&#xff09;技术与汽车行业的结合犹如一场科技盛宴&#xff0c;让我们看到了未来出行的新方向。通过自动…

Iceoryx2:高性能进程间通信框架(中间件)

文章目录 0. 引言1. 主要改进2. Iceoryx2 的架构3. C示例代码3.1 发布者示例&#xff08;publisher.cpp&#xff09;3.2 订阅者示例&#xff08;subscriber.cpp&#xff09; 4. 机制比较5. 架构比较6. Iceoryx vs Iceoryx2参考资料 0. 引言 Iceoryx2 是一个基于 Rust 实现的开…

NumPy安装

1.NumPy简介 NumPy(Numerical Python) 是 Python 语言的扩展程序库&#xff0c;支持大量维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库。 NumPy 的前身 Numeric 最早由 Jim Hugunin 与其它协作者共同开发&#xff0c;2005 年&#xff0c;Travis Oliph…

全自动一键批量创建站群网站插件 | Z-BlogPHP 堆词起站工具

在当今竞争激烈的数字营销世界&#xff0c;如何快速提升网站曝光率和流量&#xff1f;答案就是智能站群系统。 本文将结合实际效果&#xff0c;介绍一款功能强大的站群系统&#xff0c;重点讲述其堆词功能、泛目录管理、一键批量创建、内容转码、自定义标签和GPT内容生成与发布…

C++研发笔记11——C语言程序设计初阶学习笔记9

本篇笔记我们继续第二部分《初识C语言》的学习&#xff0c;上一篇学习笔记当中我们详细学习了常见关键字以及#define 定义常量和宏的相关知识&#xff0c;接下来第二部分的内容的内容还包括&#xff1a;指针以及结构体。 第二部分 初识C语言 十三、指针 // 学习指针之前&am…

Apache HTTP Sever 的初级操作指南

Apache 初级操作指南 摘要&#xff1a; 本文详细介绍了 Apache HTTP Server 的初级操作方法&#xff0c;包括安装与配置、启动与停止服务、虚拟主机设置以及访问日志与错误日志的查看与分析等内容。通过本文的学习&#xff0c;初学者可以快速掌握 Apache 的基本操作&#xff0…

[数组排序] LCR 164. 破解闯关密码

文章目录 1. 题目链接2. 题目大意3. 示例4. 解题思路5. 参考代码 1. 题目链接 LCR 164. 破解闯关密码 - 力扣&#xff08;LeetCode&#xff09; 2. 题目大意 描述&#xff1a;给定一个非负整数数组 nums。 要求&#xff1a;将数组中的数字拼接起来排成一个数&#xff0c;打印…

【深度学习】时间序列预测、分类、异常检测、概率预测项目实战案例

说明&#xff1a;本专栏内容来自于个人学习笔记、以及相关项目的实践与总结。写作目的是为了让读者体会深度学习的独特魅力与无限潜力&#xff0c;以及在各行各业之中的应用与实践。因作者时间精力有限&#xff0c;难免有疏漏之处&#xff0c;期待与读者共同进步。 前言 在当今…

C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(1)

在使用模块之前&#xff0c;头文件用于提供代码重用的接口。头文件确实有许多问题&#xff0c;比如避免同一头文件的多重包含以及确保头文件的包含顺序正确。还有&#xff0c;简单的#include&#xff0c;例如&#xff0c;<iostream>就添加了几千行代码&#xff0c;编译器…

第十五章 Vue工程化开发及Vue CLI脚手架

目录 一、引言 二、Vue CLI 基本介绍 三、安装Vue CLI 3.1. 安装npm和yarn 3.2. 安装Vue CLI 3.3. 查看 Vue 版本 四、创建启动工程 4.1. 创建项目架子 4.2. 启动工程 五、脚手架目录文件介绍 六、核心文件讲解 6.1. index.html 6.2. main.js 6.3. App.vue 一、…

EtherCAT通信系统中的时钟同步机制

EtherCAT&#xff08;Ethernet for Control Automation Technology&#xff09;通信系统中的时钟同步机制是其核心特性之一&#xff0c;它确保了所有连接的设备能够精确、同步地执行操作。以下是对EtherCAT通信系统中时钟同步机制的详细解释和介绍&#xff1a; 一、分布式时钟…

Linux 进程终止 进程等待

目录 进程终止 退出码 错误码 代码异常终止(信号详解) exit _exit 进程等待 概念 等待的原因 wait 函数原型 参数 返回值 监控脚本 waitpid 概念 函数原型 参数 返回值 WIFEXITED(status) WEXITSTATUS(status) 问题 为什么不用全局变量获得子进程的退出信…

[MySQL]DQL语句(一)

查询语句是数据库操作中最为重要的一系列语法。查询关键字有 select、where、group、having、order by、imit。其中imit是MySQL的方言&#xff0c;只在MySQL适用。 数据库查询又分单表查询和多表查询&#xff0c;这里讲一下单表查询。 基础查询 # 查询指定列 SELECT * FROM …

如何理解ref,toRef,和toRefs

1. ref ref 是 Vue 3 提供的一个用于创建响应式数据的 API。它可以用来创建简单的响应式变量&#xff0c;例如数字、字符串、布尔值或对象等。通过使用ref&#xff0c;当数据发生变化时&#xff0c;相关的组件视图会自动更新。 用法 创建响应式数据&#xff1a; import { ref …