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内容生成与发布…

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

说明&#xff1a;本专栏内容来自于个人学习笔记、以及相关项目的实践与总结。写作目的是为了让读者体会深度学习的独特魅力与无限潜力&#xff0c;以及在各行各业之中的应用与实践。因作者时间精力有限&#xff0c;难免有疏漏之处&#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 一、…

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 …

Java 批量导出Word模板生成ZIP文件到浏览器默认下载位置

是不是你们要找的&#xff01;是不是你们要找的&#xff01;是不是你们要找的&#xff01; 先看效果&#xff1a; 1.word模板格式 2.模板位置 3.需要的依赖 <!--POI-TL实现数据导出到word模板--><dependency><groupId>cn.hutool</groupId><artifact…

Flarum:简洁而强大的开源论坛软件

Flarum简介 Flarum是一款开源论坛软件&#xff0c;以其简洁、快速和易用性而闻名。它继承了esoTalk和FluxBB的优良传统&#xff0c;旨在提供一个不复杂、不臃肿的论坛体验。Flarum的核心优势在于&#xff1a; 快速、简单&#xff1a; Flarum使用PHP构建&#xff0c;易于部署&…

CPU用户时间百分比

在计算机系统中&#xff0c;"CPU用户时间百分比&#xff08;CPU User Time&#xff09;"是一个性能监控指标&#xff0c;它描述了CPU在用户模式下执行的累积时间与总的CPU时间的比例。这个指标可以帮助我们了解系统在执行用户态程序时的负载情况。下面是一些关于CPU用…

ubuntu20.04安装ros与rosdep

目录 前置配置 配置apt清华源 配置ros软件源 添加ros安装源&#xff08;中科大软件源&#xff09; 设置秘钥 更新源 ros安装 安装ros 初始化 rosdep 更新 rosdep 设置环境变量 安装 rosinstall 安装验证 启动海龟仿真器 操控海龟仿真器 rosdep安装更新 安装 使用…

mobile频段要查找、设置并获取相关参数,该怎么破?

今天我们一起来学习查找和设置mobile频段&#xff0c;并获取相关参数。 一、mobile概述 1.1 简介 “4G mobile”指的是第四代移动通信技术&#xff0c;常用于描述通过4G网络进行的高速无线数据传输和通信。4G网络最显著的特征是其高速数据传输能力。理论上&#xff0c;4G可以…

「C/C++」C++11 之<thread>多线程编程

✨博客主页何曾参静谧的博客📌文章专栏「C/C++」C/C++程序设计📚全部专栏「VS」Visual Studio「C/C++」C/C++程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasolid函数说明目…