给你的边框加点渐变,要你好看!

·  阅读 2571
给你的边框加点渐变,要你好看!

这是我参与11月更文挑战的第8天,活动详情查看:2021最后一次更文挑战

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信:frontendpicker,邀你进群,一起学习交流前端,成为更优秀的工程师~.点我探索新世界!

前言

总有人觉得CSS就是一个布局的工具,忽视了CSS的重点,CSS的全称是啥?层叠样式表(Cascading Style Sheets)第二个词是啥,样式样式样式!总有人把CSS的强大忽略了。同样的效果,不同的实现方式,总会有好有坏,但是就怕你一种也不会!本文主要通过一个边框的实现方式来学习不同的属性。

border-image

我之前写过一篇文章来专门来介绍这个属性。《24张图攻克border-image 》- juejin.cn/post/699557…

首先这个属性是下面个属性的缩写,

border-image-source 指定资源

border-image-slice规定图片剪裁位置

border-image-width指定宽度

border-image-outset 指定在边框外部绘制 区域 的量

border-image-repeat 这个是和background-repeat基本差不多*

实现

border-image-source不仅可以接受图片,还可以接受渐变。

注意:这种实现方式有一个缺点就是, border-radius:是无法生效的。所以圆角渐变边框,经过评论区大佬的指点: clip-path:inset(0 round 2px);可以解决圆角的问题。这里的2px适合border宽度一致。 25张图熟练掌握clip-path 看完就会

这里将整个div分割,然后使用streach拉伸整个border-image.

     .border-image {
        width: 200px;
        height: 100px;
        border: 2px solid;
        border-image-source: linear-gradient(45deg, #56ECC7, #9f5ad8);
        clip-path:inset(0 round 2px);
        border-image-slice: 1;
        border-image-repeat: stretch;
      }
复制代码

image-20211108232240601

background+父子div

``` .container { background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%); padding: 1px; width: 200px; height: 100px; border-radius: 4px; } .box { background: #fff; border-radius: 4px; width: 100%; height: 100%; } </style>
```

image-20211108232246825

backgorund+一个div+一个伪元素

看到上一个例子,可能有人此时会想到既然可以使用两个div,那为何不使用一个div加上:after呢?当然是可以的

image-20211108232725786

注意:这里的伪元素充当的是上面父div的角色,可能有人非不信,一定要把渐变加在container上,然后为元素设置白色。你有没有考虑容器有内容的情况。

 .container::after {
    content: "";
	z-index: -1;background: 
	linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);
}
    <div class="container">渐变边框</div>

复制代码

background-clip

这个属性不多介绍了,请看之前的文章:《图片属性(中)background-attachment、clip、repeat、size等 》juejin.cn/post/699483…

background-clip: content-box;背景被裁剪至内容区(content box)外沿.

background-clip: border-box;背景延伸至边框外沿(但是在边框下层).

我们这里设置两个渐变,一个全白的渐变,使用background-clip: content-box让他覆盖内容区域。然后使用background-clip: border-box;将 linear-gradient(45deg, #56ecc7, #6067f3);放到border上面。这样是为啥要设置 background-origin: border-box;

   .container {;
        border: solid 1px transparent;
        border-radius: 5px;
        background-image: linear-gradient(#fff, #fff),
          linear-gradient(45deg, #56ecc7, #6067f3);
        background-origin: border-box;
        background-clip: content-box, border-box;
        text-align: center;
        line-height: 80px;
      }
复制代码

后记

本来这周还打算送一本书的,不过昨天看到有大佬已经送了,那我就掺和了!什么?滚动条也能换“新装”!,大家可以直接去参加这位大佬的吧,web优化的书还是不错的。

分类:
前端
标签:
分类:
前端
标签: