CSS渐变之背景、边框、字体渐变

wapeyang 发布于2019-08-29 14:13 / 2821人阅读

摘要：使用实现背景色渐变边框渐变，字体渐变的效果。定义渐变的颜色，可以使用百分比指定渐变长度。比如则变成了酱子背景色渐变非常简单，但上面的代码中，是加在属性上的。被切割的个部分分布在边框的个区域。

使用CSS实现背景色渐变、边框渐变，字体渐变的效果。

背景色渐变

.bg-block {
  background: linear-gradient(to bottom, #F80, #2ED);
}

效果如图：

linear-gradient: ([ | to , ]? [, + ])

angle | side-to corner 定义了渐变线，to-bottom 等同于180deg, to-top 等同于0deg。
color-stop 定义渐变的颜色，可以使用百分比指定渐变长度。比如：

 background: linear-gradient(180deg, #F80 70%, #2ED);

则变成了酱子：

背景色渐变非常简单，但上面的css代码中，linear-gradient是加在background属性上的。于是测试下具体是加在了哪个属性上，首先感性上就觉得是加在了background-color上，修改代码background为background-color之后，果然，渐变色没有了。
仔细看下linear-gradient的定义：

Thelinear-gradient()function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the  data type, which is a special kind of []

于是，这应该是个image了，修改代码background为background-image，结果渐变色保持如上图。

字体渐变

字体渐变没那么容易想到了，参考了张鑫旭大神的文章，实现如下：

.font-block {
     font-size: 48px;
     background-image: linear-gradient(to bottom,#F80, #2ED);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

效果如下：

这种字体渐变的方法可以这么理解：字体本身是有颜色的，先让字体本身的颜色变透明（text-fill-color为transparent），然后添加渐变的背景色(background-image: line-gradient...)，但是得让背景色作用在字体上(background-clip: text)。

要注意的是：

text-fill-color 是个非标准属性，但多数浏览器支持带-webkit前缀，所以使用时需要带上-webkit前缀。

background-clip属性虽然多数浏览器已经支持，但text属性值浏览器支持还需要加-webkit前缀。（参考这里：https://developer.mozilla.org...）

以上两条，通常使用postcss时是不会自动加前缀的，所以也就不能偷懒。

要注意-webkit-text-fill-color: transparent对字体带来的影响，因为设置了透明，笔者在使用时踩了坑，同时使用了text-overflow: ellipsis; 这个时候是看不到点点点的。

边框渐变

.border-block {
  border: 10px solid transparent;
  border-image: linear-gradient(to top, #F80, #2ED);
  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具体可以参考这篇References第一篇文章，讲的比较详细。

References

1.CSS3边框图片详解：http://www.360doc.com/content...
2.linear-gradient MDN:
https://developer.mozilla.org...

云服务器 GPU云服务器边框渐变html 背景渐变网页背景渐变背景色渐变

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113001.html

CSS 设计指南学习笔记二

摘要：原文地址本篇文章是笔者的设计指南学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对设计指南进行一些总结，没有看之前第一部分的话也可以从这里传送过去。原文地址：http://justclear.github.io/css-stylin-with-css-note-2 本篇文章是笔者的《CSS 设计指南》学习笔记的第二部分，由于最近都在准备期末考的事，所以都没来得及对 ...

printempw 2019-08-30 12:47 评论0 收藏0
前端知识点总结——CSS

摘要：父元素没有上边框为子元素设置上外边距时在中嵌套一个子元素设置其尺寸为，并设置其背景颜色设置的上外边距为观察其结果。前端知识点总结——CSS 1.CSS的概述 1.什么是CSS? CSS：Cascading Style Sheets层叠样式表，级联样式表（简称：样式表） 2.作用设置HTML网页元素的样式 3.HTML与CSS的关系 HTML：负责内容的展示 CSS：负责内容（元素）...

nicercode 2019-08-30 14:01 评论0 收藏0
前端面试之CSS3新特性

摘要：和这三个特性是新增的和动画相关的特性。使用方式如下和变换类型可以有各种变换类型，即属性值定义不进行转换。设置列之间的宽度样式和颜色规则和和用户界面中，新的用户界面特性包括重设元素尺寸盒尺寸以及轮廓等。除了html5的新特性，CSS3的新特性也是面试中经常被问到的。选择器 CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。 element1~...

glumes 2019-08-29 12:53 评论0 收藏0
css3

css3新增选择器属性选择器包括h5中新增的自定义属性 p[data-id]{color: red} sasas 属性选择器可以指定属性值的样式变化 E[attr=value] 指定属性名 p[data-id=111]{color: red} sasas1 sasas2 sasas3 只有第一行才会...

RancherLabs 2019-08-29 13:28 评论0 收藏0