编程技术

Document

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：边框宽度 边框线型 边框颜色
  • 1.
  • 三种样式的顺序没有要求，用空格分开即可。
  • 会同时设置上、下、左、右边框的样式

范例

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

<template>
  <div class="box"></div>
</template>
<style scoped>
.box {
  border: 1px solid red;
  height: 60px;
  width: 60px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

分开设置边框样式

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

样式值的语法和 border 相同

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

<template>
  <div class="box"></div>
</template>
<style scoped>
.box {
  border: 1px solid red;
  border-right: 2px solid blue;
  height: 60px;
  width: 60px;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

清除边框

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

边框-圆角 border-radius

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

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

四个角的半径都相同时：

border-radius:10px;
  • 1.

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

border-radius: 30px / 60px;
  • 1.

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

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

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

border-top-left-radius: 60px 120px;        //左上角
border-top-right-radius: 60px 120px;       //右上角
border-bottom-left-radius: 60px 120px;     //左下角
border-bottom-right-radius: 60px 120px;    //右下角
  • 1.
  • 2.
  • 3.
  • 4.

复合写法：

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

border-radius 属性的其他特征

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

重叠曲线的渲染机制


当 border-radius 遇上有厚度的 border


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

 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;
  • 1.

单独设置边框图片的属性

/* 边框图片的路径*/
border-image-source: url("images/border.png");

/* 图片边框的裁剪*/
border-image-slice: 27;

/*图片边框的宽度*/
border-image-width: 27px;

/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

【实战】渐变边框

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

<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

【实战】圆角渐变边框

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

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

方法一：使用clip-path

.clip-path {
    clip-path: inset(0 round 10px);
}
  • 1.
  • 2.
  • 3.

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

.father {
    border-radius: 10px;
    overflow: hidden;
}
  • 1.
  • 2.
  • 3.
  • 4.

【实战】红色条纹边框

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

<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

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

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

<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

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

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


轮廓 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;
  • 1.

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


原创作者: u_15715491 转载于: https://blog.51cto.com/u_15715491/11457372