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

news2024/9/19 10:36:14

边框 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.coloradmin.cn/o/1923771.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据库MySQL下载安装

数据库MySQL下载安装

MySQL下载安装地址如下&#xff1a; MySQL :: Download MySQL Community Server 1、下载界面 2、点击下载 3、解压记住目录 4、配置my.ini文件 未完..
阅读更多...
整洁架构SOLID-里氏替换原则(LSP)

整洁架构SOLID-里氏替换原则(LSP)

文章目录 定义LSP继承实践正例反例 LSP软件架构实践反例 小结 定义 1988年&#xff0c;Barbara Liskov在描述如何定义子类型时写下了这样一段话&#xff1a; 这里需要的是一种可替换性&#xff1a;如果对于每个类型是S的对象o1都存在一个类型为T的对象o2&#xff0c;能使操作T…
阅读更多...
树莓派PICO使用INA226测量电流和总线电压（1）

树莓派PICO使用INA226测量电流和总线电压（1）

TI的INA226是一款不错的16位电流测量芯片&#xff0c;拥有非常高的性价比&#xff0c;而且测量精度能够覆盖我们大多数的应用场景&#xff0c;INA226的接线也比较简单&#xff0c;通过I2C读取数据会稍微麻烦一点。 INA226可以在淘宝上直接买开发板&#xff0c;非常的便宜&#…
阅读更多...
本地部署，去除动漫图像背景Anime Remove Background

本地部署，去除动漫图像背景Anime Remove Background

目录 摘要 引言 深度学习在动漫角色中的应用 1.​U-Net 2.Mask R-CNN 3.ISNet 模型 4.MODNet 模型 5.InSPyReNet 模型 本地部署 运行效果 测验结果​ Tip&#xff1a; 摘要 动漫图像背景去除是一项在图像处理和计算机视觉领域具有重要应用的技术&#xff0c;广泛应用于…
阅读更多...
「Pytorch」roLabelImg 图像异常旋转 bug

「Pytorch」roLabelImg 图像异常旋转 bug

在进行Yolo-obb 模型训练的时候需要标注旋转框&#xff0c;roLabelImg 是比较推荐的一款旋转框标注工具&#xff0c;既可以标注正常的矩形框&#xff0c;还可以标注旋转框 roLabelImg Github 地址&#xff1a;https://github.com/HumanSignal/labelImg 但是在使用过程中遇到了…
阅读更多...
Word中使用LaTeX编辑公式

Word中使用LaTeX编辑公式

在日常学术写作过程中&#xff0c;公式输入必不可少。然而使用Word传统的公式编辑器往往无法满足高标准的排版要求&#xff0c;如排版不专业、编辑效率低、兼容性差等问题。LaTeX相比Word&#xff0c;在公式输入及排版方面更为强大&#xff0c;但是对于轻量级的任务&#xff0c…
阅读更多...
Vivado 2020.1 HLS IP在BD模式无法生成问题

Vivado 2020.1 HLS IP在BD模式无法生成问题

折腾了一周整整&#xff0c;记录一下&#xff0c;希望对大家有用。 各种找、各种操作&#xff0c;也问了FAE&#xff0c;都没搞定。 最后看到如下博文的方法3&#xff0c;管用。 vivado综合hls类ip核报错问题解决方案_vivado ip synth checkpoint mode-CSDN博客 报错描述 m…
阅读更多...
Chatto企业AI助手产品技术拆解(上)

Chatto企业AI助手产品技术拆解(上)

往期文章&#xff1a; AI智能客服项目拆解(1) 产品大纲 在上一篇文章中&#xff0c;我们详细介绍了AI智能客服的基本概念、需求分析、产品形态及分类&#xff0c;以及AI在线客服的用户体验流程和系统架构。为了更深入地理解AI智能客服的内在工作机制和技术实现&#xff0c;本…
阅读更多...
【读论文】Instant Neural Graphics Primitives with a Multiresolution Hash Encoding

【读论文】Instant Neural Graphics Primitives with a Multiresolution Hash Encoding

文章目录 1. What2. Why2.1 Introduction2.2 Related work and background 3. How: Multiresolution hash encoding3.1 Structure3.2 Input coordinate3.3 Hash mapping3.4 Interpolation3.5 Performance vs. quality3.6 Hash collision 4. Experiment on Nerf 1. What To red…
阅读更多...
Pygame开发五子棋之人机对战游戏

Pygame开发五子棋之人机对战游戏

引言 Pygame是一个基于Python的开源游戏开发库&#xff0c;它包含了丰富的多媒体功能&#xff0c;尤其是针对游戏开发所需的各种组件。如果你对游戏开发感兴趣&#xff0c;但又不想从底层开始编写所有东西&#xff0c;Pygame可以成为一个理想的起点。本文将介绍Pygame的基本概…
阅读更多...
C++：类和对象 I（访问限定符、this指针）

C++：类和对象 I（访问限定符、this指针）

目录 类的定义 类的大小 访问限定符 实例化 this指针 类的定义 class就是类&#xff0c;class是C中的一个关键字 当然类也可以是C语言中的struct&#xff0c;C兼容struct&#xff0c;甚至还有一些升级 定义类的方式 class Date {}; 和C语言的struct一样&#xff0c;c…
阅读更多...
【信息收集】域名信息收集

【信息收集】域名信息收集

域名介绍 域名&#xff08;Domain Name&#xff09;&#xff0c;简称域名、网域&#xff0c;是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称&#xff0c;用于在数据传输时标识计算机的电子方位&#xff08;有时也指地理位置&#xff09;。 DNS&#xf…
阅读更多...
【Python】jupyter notebook平台的使用·

【Python】jupyter notebook平台的使用·

目录 一、安装Anaconda 二、 将BreadCancer.zip上传到jupyter notebook平台中 三、了解BreadCancerClassifier.ipynb文件在jupyter notebook的单元格中的python代码&#xff0c;并运行。 3.1 导入mainFun文件 3.2 读入数据 3.3 开始训练 3.4 读入测试数据 3.5 开始测试…
阅读更多...
[笔记] SEW的振动分析工具DUV40A

[笔记] SEW的振动分析工具DUV40A

1.便携式振动分析仪 DUV40A 文档编号&#xff1a;26871998/EN SEW是一家国际化的大型的机械设备供应商。产品线涵盖电机&#xff0c;减速机&#xff0c;变频器等全系列动力设备。DUV40A是他自己设计的一款振动分析工具。 我们先看一下它的软硬件参数&#xff1a; 内置两路传…
阅读更多...
i7-13700K负载过高时出现无故自动重启(蓝屏问题)

i7-13700K负载过高时出现无故自动重启(蓝屏问题)

现象&#xff1a;电脑无故自动重启&#xff0c;关闭故障自动重启后&#xff0c;发现系统蓝屏&#xff0c;然后需要手动重启。经测试&#xff0c;当CPU负载高时&#xff0c;就会有一定概率出现蓝屏。 配置&#xff1a;CPU为i7-13700K&#xff0c;系统为Win11 解决方法 现象刚…
阅读更多...
Python那些优质可视化工具！

Python那些优质可视化工具！

作者&#xff1a;Lty美丽人生 https://blog.csdn.net/weixin_44208569 本次分享10个适用于多个学科的Python数据可视化库&#xff0c;其中有名气很大的也有鲜为人知的&#xff01; 1、matplotlib 两个直方图 matplotlib 是Python可视化程序库的泰斗。经过十几年它任然是Pytho…
阅读更多...
mitmproxy介绍及使用

mitmproxy介绍及使用

mitmproxy介绍 mitmproxy又名中间人攻击代理&#xff0c;是一个抓包工具&#xff0c;类似于WireShark、Filddler&#xff0c;并且它支持抓取HTTP和HTTPS协议的数据包&#xff0c;只不过它是一个控制台的形式操作。另外&#xff0c;它还有两个非常有用的组件&#xff0c;一个mi…
阅读更多...
漏扫处理：SSH弱算法问题解决

漏扫处理：SSH弱算法问题解决

目录 漏洞说明解决方法1. 查看可用的算法2. 禁用弱算法3.检查ssh配置4.重启ssh服务5.ssh测试连接是否正常6.漏扫测试参考链接漏洞说明 通过漏扫得出，服务器SSH支持密钥交换算法，而此算法被认为是弱算法，存在高风险问题。 启用了以下弱算法： diffie-hellman-group-exchage…
阅读更多...
前端JS特效第33波：jQuery旋转木马焦点图轮播插件PicCarousel

前端JS特效第33波：jQuery旋转木马焦点图轮播插件PicCarousel

jQuery旋转木马焦点图轮播插件PicCarousel&#xff0c;先来看看效果&#xff1a; 部分核心的代码如下&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <meta http-equiv"X-UA-Compatible" content"IE…
阅读更多...
Go 初始化一个字典

Go 初始化一个字典

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023