【我不熟悉的css】css使用background-clip，实现圆角彩色的边框，文字渐变色

预警，初级内容，菜鸟必看，大佬请绕道

我在这篇文章中使用css的border-image属性实现了一个彩色的边框，但是圆角border-radius属性无效，所以本篇文章使用另一种方法实现这个需求。

我们需要用到的属性是background-clip

首先来学习一个单词，请记住clip有修剪的意思，所以background-clip就是背景的修剪

想要修剪背景，我们自然首先需要使用background/background-image属性来设置背景色或者图片。其实这个属性在我的这篇文章，给文字设置渐变颜色的时候用到过，原理都是一个。

实现的代码如下

重点是background-clip的取值，

border-box 背景延伸至边框外沿（但是在边框下层）常用。
padding-box 背景延伸至内边距（padding）外沿。不会绘制到边框处。
content-box 背景被裁剪至内容区（content box）外沿。
text 背景被裁剪成文字的前景色
可以设置多个值，从某一个区域裁剪至另一个区有，从内向外，顺序不能变

在这个例子中，在使用border-box裁剪的时候，

一定要设置border: 1px solid transparent，需要设置边框，并且把颜色设置成透明，否则会显示边框的颜色；
同时background-clip: padding-box, border-box; 两个值缺一不可，否则无法形成环形;
同时background-origin: padding-box；这个值必须是padding-box，可以自己设置成border-box，或者content-box体验一下区别

请详细阅读官方文档，里面也有关于文字渐变色的例子。

【我不熟悉的css】css使用background-clip，实现圆角彩色的边框，文字渐变色相关推荐

CSS奇思妙想 -- 使用 background 创造各种美妙的背景（下篇）...
CSS奇思妙想 -- 使用 background 创造各种美妙的背景(下篇)... 使用 mask 除去混合模式,与背景相关的,还有一个非常有意思的属性 -- MASK. mask 译为遮罩.在 CS ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
（15）css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
css 背景色渐变 background linear-gradient
css 背景色渐变 background linear-gradient background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0 ...
css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
CSS中的background的详细属性
本文转自:http://blog.sina.com.cn/s/blog_969555e3010135s6.html css2中有五个与背景相关的属性.它们是: background-color:完全填 ...
CSS奇思妙想 -- 使用 background 创造各种美妙的背景（上篇）...
本文将介绍一些利用 CSS 中的 background.mix-blend-mode.mask 及一些相关属性,制作一些稍微复杂.酷炫的背景. 通过本文,你将会了解到 CSS background 中 ...
CSS奇思妙想 -- 使用 background 创造各种美妙的背景
本文属于 CSS 绘图技巧其中一篇,系列文章: 在 CSS 中使用三角函数绘制曲线图形及展示动画 CSS奇思妙想 -- 使用 CSS 创造艺术将介绍一些利用 CSS 中的 background.mi ...
css设置备用 background背景图
css设置备用 background背景图有时需要给容器设置一个备用背景图片比如需求:服务器上的背景图文件不一定存在,存在的话显示服务器上的图片,不存在的话则显示''备用''背景图(补位图片) ...

【我不熟悉的css】css使用background-clip，实现圆角彩色的边框，文字渐变色

实现的代码如下

【我不熟悉的css】css使用background-clip，实现圆角彩色的边框，文字渐变色相关推荐

最新文章

热门文章