CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline

边框 border

border 是以下三种边框样式的简写：

  • border-width 边框宽度 —— 数值 px（像素）,thin（细）,medium（中等）,thick（粗）
  • border-style 边框线型 —— none【默认值】，dashed（横线）,dotted（点）,solid（实线）,double（双实线，当边框>=3px才有效果）
  • border-color 边框颜色 —— 颜色值，默认颜色是color色值

语法为

border：边框宽度 边框线型 边框颜色
  • 三种样式的顺序没有要求，用空格分开即可。
  • 会同时设置上、下、左、右边框的样式

范例
在这里插入图片描述

<template><div class="box"></div>
</template>
<style scoped>
.box {border: 1px solid red;height: 60px;width: 60px;
}
</style>

分开设置边框样式

  • border-top 上边框
  • border-right 右边框
  • border-bottom 下边框
  • border-left 左边框

样式值的语法和 border 相同

在这里插入图片描述

<template><div class="box"></div>
</template>
<style scoped>
.box {border: 1px solid red;border-right: 2px solid blue;height: 60px;width: 60px;
}
</style>

清除边框

将样式值设置为 none 或 0 即可

边框-圆角 border-radius

值可以为长度单位 px 等，或用 % ，值为 50% 时矩形会变为椭圆，正方形会变为圆形！

边框的每个角，本质上是一个圆，圆的水平半径和垂直半径相等时，就是圆；如果二者不等， 就是椭圆。

四个角的半径都相同时：

border-radius:10px;

用/区分水平半径和垂直半径

border-radius: 30px / 60px;

斜杠前后都支持1～4个长度值。

/* 左上 右上+左下 右下 / 左上 右上+左下 右下 */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* 左上+右下 右上+左下 / 左上 右上 右下 左下 */
border-radius: 10px 5% / 20px 25em 30px 35em;

分别定义各个角：（用空格区分水平半径和垂直半径）

border-top-left-radius: 60px 120px;        //左上角
border-top-right-radius: 60px 120px;       //右上角
border-bottom-left-radius: 60px 120px;     //左下角
border-bottom-right-radius: 60px 120px;    //右下角

复合写法：

border-radius: 60px/120px;             //参数：水平半径/垂直半径
border-radius: 20px 60px 100px 140px;  //从左上开始，顺时针赋值。如果当前角没有值，取对角的值
border-radius: 10px 50% 30px; // 第一个值作用于左上角，第二个值作用于右上角和左下角，第三个值作用于右下角
border-radius: 20px 60px;

border-radius 属性的其他特征

  • 不支持负值
  • 圆角以外的区域不可点击，无法响应click事件。
  • 没有继承性，父元素设置了border-radius，子元素依然是直角效果。可以通过给父元素设置overflow:hidden让子元素视觉上表现为圆角。
  • 可以应用于display的计算值为table、inline-table或者table-cell的元素上的，但是有一个前提，那就是表格元素的border-collapse属性值需要是separate（separate是border-collapse属性的默认值），如果border-collapse属性值是collapse，那么是没有圆角效果的。

重叠曲线的渲染机制

https://blog.csdn.net/weixin_41192489/article/details/120463380

当 border-radius 遇上有厚度的 border

https://blog.csdn.net/weixin_41192489/article/details/120463590

【实战】不规则的圆角头像

https://demo.cssworld.cn/new/4/2-1.php

https://demo.cssworld.cn/new/4/2-2.php

https://www.zhangxinxu.com/study/201702/cicada-principle-border-radius.html

【实战】绘制角标、对话框的小尾巴

https://demo.cssworld.cn/new/4/2-3.php

边框-填充 border-image

  • border属性不能写在border-image属性的下方，否则border-image会失效，因为border属性的缩写中包含了border-
    image相关属性的信息。

  • 若自定义边框图片，因图片渲染规则与现实设计不符，很少使用，简单了解即可。

    border-image: url("images/border.png") 27/20px round;

单独设置边框图片的属性

/* 边框图片的路径*/
border-image-source: url("images/border.png");/* 图片边框的裁剪*/
border-image-slice: 27;/*图片边框的宽度*/
border-image-width: 27px;/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;

【实战】渐变边框

在这里插入图片描述

<template><p class="border-linear-gradient">上下渐变边框</p><p class="border-radial-gradient">径向渐变边框</p>
</template>
<style scoped>
.border-linear-gradient {border: 10px solid;border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;
}
.border-radial-gradient {border: 10px solid;border-style: solid;border-image: radial-gradient(deepskyblue, deeppink) 20 / 10px;
}
</style>

【实战】圆角渐变边框

border-radius属性无法改变 border-image 属性生成的图形效果，所以需要使用其他的方法。

在这里插入图片描述

方法一：使用clip-path

.clip-path {clip-path: inset(0 round 10px);
}

方法二：外层嵌套一层div元素，然后设置圆角和溢出隐藏

.father {border-radius: 10px;overflow: hidden;
}

【实战】红色条纹边框

在这里插入图片描述

<template><div class="border-stripe">用红色条纹边框表示警示</div>
</template>
<style scoped>
.border-stripe {border: 12px solid;border-image: repeating-linear-gradient(-45deg, red, red 5px, transparent 5px, transparent 10px)12;
}
</style>

【实战】模拟自定义的虚线

在这里插入图片描述

<template><div class="border-dashed">1:1的虚线</div>
</template>
<style scoped>
.border-dashed {border: 1px dashed deepskyblue;border-image: repeating-linear-gradient(135deg,deepskyblue,deepskyblue 5px,transparent 5px,transparent 10px)1;
}
</style>

border-image属性最适合模拟宽度为1px的虚线边框。如果边框宽度比较大，实线的端点就会有明显的斜边，此时建议使用background-image属性和线性渐变语法进行模拟，或者干脆使用SVG元素配合stroke-dasharray实现更灵活的边框效果。

使用 stroke-dasharray 实现任意比例和任意比例数量的虚线

https://blog.csdn.net/weixin_41192489/article/details/121636736

轮廓 outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  • 不会占据空间，也不一定是矩形
值描述
outline-color规定边框的颜色（默认值为color的颜色值）。参阅：outline-color 中可能的值。
outline-style规定边框的样式。参阅：outline-style 中可能的值。
outline-width规定边框的宽度。参阅：outline-width 中可能的值。
inherit规定应该从父元素继承 outline 属性的设置。
outline-offset设置轮廓的偏移位置
- 正值会扩大轮廓
- 负值会缩小轮廓（常用于避免轮廓被重叠覆盖，见范例 https://demo.cssworld.cn/new/3/11-1.php）
outline:#00ff00 dotted thick;

轮廓

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

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

相关文章

数据结构(4.4)——求next数组

数据结构(4.4)——求next数组

next数组的作用:当模式串的第j个字符失配时&#xff0c;从模式串的第next[j]的继续往后匹配 求模式串的next数组(手算) next[1] 任何模式串都一样&#xff0c;第一个字符不匹配时&#xff0c;只能匹配下一个子串&#xff0c;因此&#xff0c;往后&#xff0c;next[1]都无脑写…
阅读更多...
51单片机6（P0P1P2P3结构框架图）

51单片机6（P0P1P2P3结构框架图）

一、GPIO结构框架图与工作原理 1、接下来我们介绍一下这个GPIO结构框图和工作原理&#xff0c;我们使用51单片机的GPIO分为了P0&#xff0c;P1&#xff0c;P2&#xff0c;P3这四组端口&#xff0c;下面我们就分别来介绍这四组端口它的一个内部结构&#xff0c;只有了解了内部的…
阅读更多...
排序相关算法--3.选择排序

排序相关算法--3.选择排序

之前涉及的堆排序就是选择排序的一种&#xff0c;先进行选择。 基本选择排序&#xff1a; 最简单&#xff0c;也是最没用的排序算法&#xff0c;时间复杂度高并且还是不稳定的排序方法&#xff0c;项目中很少会用。 过程&#xff1a; 在一个长度为 N 的无序数组中&#xff0c;…
阅读更多...
Python使用策略模式和openpyxl库创建Excel文件并追加内容

Python使用策略模式和openpyxl库创建Excel文件并追加内容

from openpyxl import load_workbook# 数据数组 data [[1, 2, 3],[4, 5, 6],[7, 8, 9] ]# 打开现有的 Excel 文件 excel_file sheetApend_example.xlsx wb load_workbook(excel_file)# 选择要追加数据的工作表 sheet_name test_Sheet2 # 指定要追加数据的工作表名称 sheet…
阅读更多...
最值得推荐的10款Windows软件！

最值得推荐的10款Windows软件！

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频播放量破百万https://aitools.jurilu.com/1.音乐播放器——Dopamine Dopamine是一款音乐播放器&#xff0c;设计简洁美观。它支持多种音频格式&#xff0c;包括wav、mp3、ogg…
阅读更多...
爬虫管理解决方案：让数据收集变得高效且合规

爬虫管理解决方案：让数据收集变得高效且合规

一、为何数据收集的效率与合规性同等重要&#xff1f; 随着大数据技术的飞速发展&#xff0c;数据收集已成为企业决策与市场洞察的核心驱动力。然而&#xff0c;在信息海洋中精准捕捞的同时&#xff0c;如何确保这一过程既高效又不触碰法律的红线&#xff0c;是每个数据实践者…
阅读更多...
“金山-讯飞”杯2024年武汉理工大学程序设计竞赛 A. Mobiusp败走***（思维题-点双连通分量、连通性）

“金山-讯飞”杯2024年武汉理工大学程序设计竞赛 A. Mobiusp败走***（思维题-点双连通分量、连通性）

题目 思路来源 官方题解 题解 手玩发现&#xff0c;能换的话&#xff0c;当且仅当.和1在一个环里&#xff0c;而这就是点双连通分量 所以最优策略是先把.换到(x,y)的位置&#xff0c;然后判断.和1在不在一个环里 也就是&#xff1a; 1. 判断删掉1时&#xff0c;.和(x,y)联…
阅读更多...
C++客户端Qt开发——信号和槽

C++客户端Qt开发——信号和槽

三、信号和槽 1.信号和槽概述 在Qt中&#xff0c;用户和控件的每次交互过程称为一个事件。比如"用户点击按钮”是一个事件&#xff0c;"用户关闭窗口”也是一个事件。每个事件都会发出一个信号&#xff0c;例如用户点击按钮会发出"按钮被点击"的信号&…
阅读更多...
基于JavaEE 的影视创作论坛的设计与实现

基于JavaEE 的影视创作论坛的设计与实现

点击下载源码 基于Javaee的影视创作论坛的设计与实现 摘 要 随着时代的发展&#xff0c;互联网的出现&#xff0c;给传统影视行业带来的最大便利就是&#xff0c;方便了影视从业人员以及爱好者的交流和互动&#xff0c;而为用户提供一个书写影评&#xff0c;阅读影评以及回复…
阅读更多...
Centos7 安装Redis6.2.6 gcc报错问题解决

Centos7 安装Redis6.2.6 gcc报错问题解决

Redis 报错信息 make: *** [all] 错误 2 安装gcc 修改yum源,在安装更新rpm包时获得比较理想的速度&#xff0c;走阿里云镜像通道 发现报错信息如下: 正在解析主机 mirrors.aliyun.com (mirrors.aliyun.com)… 失败&#xff1a;未知的名称或服务。 wget: 无法解析主机地址 “mi…
阅读更多...
9.5 栅格图层符号化多波段彩色渲染

9.5 栅格图层符号化多波段彩色渲染

文章目录 前言多波段彩色渲染QGis设置为多波段彩色二次开发代码实现多波段彩色 总结 前言 介绍栅格图层数据渲染之多波段彩色渲染说明&#xff1a;文章中的示例代码均来自开源项目qgis_cpp_api_apps 多波段彩色渲染 以“3420C_2010_327_RGB_LATLNG.tif”数据为例&#xff0c…
阅读更多...
【C++】初识C++（下）

【C++】初识C++（下）

前言 本篇博客继续总结一下C入门的一些小知识 &#x1f493; 个人主页&#xff1a;小张同学zkf ⏩ 文章专栏&#xff1a;C 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 ​ 目录 1.引用 1.1引用的概念 1.2const引用 1.3指针和引用的…
阅读更多...
无损音乐播放器推荐：Audirvana for Mac 中文激活版

无损音乐播放器推荐：Audirvana for Mac 中文激活版

udirvana 是一款高品质的音乐播放软件&#xff0c;专为Mac操作系统设计。它被设计来提供音频播放的最高标准&#xff0c;支持多种音频格式&#xff0c;包括高达32位/192kHz的高分辨率音频。Audirvana Plus 是其高级版本&#xff0c;提供了更多的功能和优化&#xff0c;例如音频…
阅读更多...
Redis 主从复制，哨兵与集群

Redis 主从复制，哨兵与集群

目录 一.redis主从复制 1.redis 主从复制架构 2.主从复制特点 3.主从复制的基本原理 4.命令行配置 5.实现主从复制 6.删除主从复制 7.主从复制故障恢复 8.主从复制完整过程 9.主从同步优化配置 二.哨兵模式&#xff08;Sentinel&#xff09; 1.主要组件和概念 2.哨…
阅读更多...
LabVIEW电容器充放电监测系统

LabVIEW电容器充放电监测系统

概述 为了对车用超级电容器的特性进行研究&#xff0c;确保其在工作时稳定可靠并有效发挥性能优势&#xff0c;设计了一套车用超级电容器充放电监测系统。该系统通过利用传感器、USB数据采集卡、可调直流稳压电源、电子负载以及信号调理电路&#xff0c;完成对各信号的采集和超…
阅读更多...
数据分组还在手忙脚乱？Python groupby一招搞定，效率翻倍！

数据分组还在手忙脚乱？Python groupby一招搞定，效率翻倍！

目录 1、初识groupby&#xff1a;基础用法 &#x1f40d; 1.1 groupby函数简介 1.2 准备数据与分组 2、按键分组 &#x1f4ca; 2.1 使用lambda表达式 2.2 自定义key函数 3、连续元素分组 &#x1f517; 3.1 不连续元素处理 3.2 连续性与排序 4、组合其他itertools模…
阅读更多...
基于香橙派 AIpro设计的医院人脸红外测温系统(从0开始开发)

基于香橙派 AIpro设计的医院人脸红外测温系统(从0开始开发)

文章目录 一、前言二、主控板介绍三、搭建开发环境3.1 准备需要的配件3.2 开发板实物图3.3 下载开发板资料3.4 下载系统烧写工具3.5 设置开发板启动模式3.6 启动系统3.7 SSH远程登录系统3.8 安装xdrp工具3.9 Window远程登录3.10 取消自动休眠 四、安装Qt开发环境4.1 安装qtcrea…
阅读更多...
Ubuntu系统安装mysql之后进行远程连接

Ubuntu系统安装mysql之后进行远程连接

1.首先要配置数据库允许进行远程连接 1.1 打开MySQL配置文件 /etc/mysql/mysql.conf.d/mysqld.cnf sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf1.2 修改 bind-address 行 #按i进入插入模式 bind-address 0.0.0.0 #按 Esc 键退出插入模式。 #输入:wq 然后按 Enter 保存并退…
阅读更多...
MySQL第八次作业

MySQL第八次作业

一、备份与恢复作业&#xff1a; 创库,建表&#xff1a; CREATE DATABASE booksDB; use booksDB; CREATE TABLE books ( bk_id INT NOT NULL PRIMARY KEY, bk_title VARCHAR(50) NOT NULL, copyright YEAR NOT NULL ); CREATE TABLE authors …
阅读更多...
在uniapp中如何使用地图

在uniapp中如何使用地图

1&#xff0c;技术选择 最好是使用webview html形式加载&#xff0c;避免打包app时的地图加载问题 2&#xff0c;webview使用 使用webview必须按照官方文档,官网地址&#xff1a;https://uniapp.dcloud.net.cn/component/web-view.html <template><view><!…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023