首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS实线边框渐变以及虚线边框渐变

CSS实线边框渐变以及虚线边框渐变

作者头像
javascript.shop
发布2019-09-04 16:29:43
8.1K0
发布2019-09-04 16:29:43
举报
文章被收录于专栏:杰的记事本杰的记事本

1. 实线边框渐变

.border-block {
  border: 10px solid transparent;
  border-image: linear-gradient(to top, blue, red);
  border-image-slice: 10;
}

实现效果如下:

给border-image加linear-gradient不难理解,但是如果单纯使用border-image,会发现效果是这样的:

所以关键作用是border-image-slice属性。

先看下border-image属性。

border-image是border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat的简写。

border-image-source 属性可以给定一个url作为边框图像,类似background-image: url的用法;

border-image-slice是指将边框图片切成9份,四个角四个边,和一个中心区域。被切割的9个部分分布在边框的9个区域。

当盒子宽度和被切图像的宽度不相等时,四个顶角的变化具有一定的拉伸效果。border-image-slice属性默认值是100%,这个百分比是相对于边框图像的宽高来的,当左右切片宽度之和>100%时,5号7号就显示空白,因此使用默认值无法看到被填满的边框图片。关于boder-image具体可以查找资料。

2. 虚线边框渐变

CSS代码:
.box {
    width: 200px;
    height: 150px;
    border: 2px dashed #cd0000;
    box-sizing: border-box;
}
@supports (-webkit-mask: none) or (mask: none) {
.box {
    border: none;
    background: linear-gradient(to bottom, #34538b, #cd0000) no-repeat;
    -webkit-mask-image: linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px),  linear-gradient(to right, #000 6px, transparent 6px), linear-gradient(to bottom, #000 6px, transparent 6px);
    -webkit-mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    -webkit-mask-position: 0 0, 0 0, 0 100%, 100% 0;
    -webkit-mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
    /* 合并写法 */
    mask: linear-gradient(to right, #000 6px, transparent 6px) repeat-x,
    linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y,
    linear-gradient(to right, #000 6px, transparent 6px) repeat-x 0 100%,
    linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0;
    mask-size: 8px 2px, 2px 8px, 8px 2px, 2px 8px;
}    
}
HTML代码:
<div class="box"></div>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年11月16日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 实线边框渐变
    • 2. 虚线边框渐变
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档