【CSS】--渐变【背景、边框、文字】

一、基础知识

1、linear-gradient() ,函数用于创建一个表示两种或多种颜色线性渐变的图片。定义线性渐变

语法

background-image: linear-gradient([direction], color-stop1, color-stop2, ...);  

// direction 可选,用角度值指定渐变的方向(或角度)。  

// color-stop1, color-stop2,... 用于指定渐变的起止颜色。
direction方向:
to bottom(默认)、to right、to left 、to top
to bottom right、to left top...、**deg

2、background-clip 规定背景的绘制区域

语法

background-clip: border-box|padding-box|content-box;

//border-box  背景被裁剪到边框盒

//padding-box  背景被裁剪到内边距框。

//content-box  背景被裁剪到内容框。

3、background-origin 设置背景图像的起始位置。

语法

background-position: value;

//top left

//top center

//bottom center

x% y%

xpos ypos

二、css实现border和text同样渐变的效果

1、实现效果:border和内部渐变不同

【CSS】--渐变【背景、边框、文字】_第1张图片

2、实现效果:border和内部渐变不同,同时文字加上渐变

【CSS】--渐变【背景、边框、文字】_第2张图片

2、代码



总结

  • linear-gradient()绘制渐变图片
  • background-clip规定背景的绘制区域。
  • background-origin,设置背景的位置
  • 绘制渐变图片,分别应用于边框、内部、文字,实现上述效果。

三、补:单独边框渐变

border-image:

source:资源

slice:分割通过 border-image-source 属性加载的图像,==>分割后去除内部图像应用成为border

width:加载资源的厚度(宽度)

outset:定义图像边框相对于边框边界向外偏移的距离

repeat:设置如何填充使用 border-image-slice 属性分割的图像边框

语法

border-image: source slice width outset repeat|initial|inherit;

border-image-source:none |

border-image-slice:[ | ]{1,4} && fill?

border-image-width:[ | | | auto ]{1,4}

border-image-outset:[ | ]{1,4}

border-image-repeat:[ stretch | repeat | round | space ]{1,2}

border-image是简写

【CSS】--渐变【背景、边框、文字】_第3张图片

  width: 100px;
  height: 100px;
  margin: 100px auto;
  border-radius: 10px;
  border: 5px solid transparent;
  border-image: linear-gradient(to right, red, #578aef) 20;

【CSS】--渐变【背景、边框、文字】_第4张图片

  width: 100px;
  height: 100px;
  margin: 100px auto;
  border-radius: 10px;
  border: 30px solid #d35b5b00;
  border-image: linear-gradient(to right, red, yellow, #578aef);
  border-image-slice: 10 fill 20 50;
  border-image-slice: 48;
  border-image-width: 20px;
  border-image-repeat: revert;

你可能感兴趣的:(CSS,css,前端,html)