边框 border
border 是以下三种边框样式的简写:
- border-width 边框宽度 ------ 数值 px(像素),thin(细),medium(中等),thick(粗)
- border-style 边框线型 ------ none【默认值】,dashed(横线),dotted(点),solid(实线),double(双实线,当边框>=3px才有效果)
- border-color 边框颜色 ------ 颜色值,默认颜色是color色值
语法为
bash
border:边框宽度 边框线型 边框颜色
- 三种样式的顺序没有要求,用空格分开即可。
- 会同时设置上、下、左、右边框的样式
范例
html
<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 相同
html
<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% 时矩形会变为椭圆,正方形会变为圆形!
边框的每个角,本质上是一个圆,圆的水平半径和垂直半径相等时,就是圆;如果二者不等, 就是椭圆。
四个角的半径都相同时:
css
border-radius:10px;
用/
区分水平半径和垂直半径
css
border-radius: 30px / 60px;
斜杠前后都支持1~4个长度值。
css
/* 左上 右上+左下 右下 / 左上 右上+左下 右下 */
border-radius: 10px 5px 2em / 20px 25px 30%;
/* 左上+右下 右上+左下 / 左上 右上 右下 左下 */
border-radius: 10px 5% / 20px 25em 30px 35em;
分别定义各个角:(用空格区分水平半径和垂直半径)
css
border-top-left-radius: 60px 120px; //左上角
border-top-right-radius: 60px 120px; //右上角
border-bottom-left-radius: 60px 120px; //左下角
border-bottom-right-radius: 60px 120px; //右下角
复合写法:
css
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相关属性的信息。
-
若自定义边框图片,因图片渲染规则与现实设计不符,很少使用,简单了解即可。
cssborder-image: url("images/border.png") 27/20px round;
单独设置边框图片的属性
css
/* 边框图片的路径*/
border-image-source: url("images/border.png");
/* 图片边框的裁剪*/
border-image-slice: 27;
/*图片边框的宽度*/
border-image-width: 27px;
/*边框图片的平铺*/
/* repeat :正常平铺 但是可能会显示不完整*/
/*round: 平铺 但是保证 图片完整*/
/*stretch: 拉伸显示*/
border-image-repeat: stretch;
【实战】渐变边框
html
<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
css
.clip-path {
clip-path: inset(0 round 10px);
}
方法二:外层嵌套一层div元素,然后设置圆角和溢出隐藏
css
.father {
border-radius: 10px;
overflow: hidden;
}
【实战】红色条纹边框
html
<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>
【实战】模拟自定义的虚线
html
<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) |
css
outline:#00ff00 dotted thick;