CSS之linear-gradiend ——实现条纹背景效果

用角度值指定渐变的方向（或角度）。角度顺时针增加。

描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。

to top == o度， to bottom == 180度， to left == 270度， to right == 90度

案例所用颜色：

条纹间隔由background-size属性控制，下图div的css样式为：

{background: linear-gradient(45deg, cadetblue 50%, lightgray 0);}

意思是：颜色渐变方向从上到下，开始0~50% 的颜色是cadetblue ，从50%开始变成颜色lightgray至结束。

下图div的css样式为：

{ background: linear-gradient(cadetblue 25%, lightgray 0, lightgray 50%, cadetblue 0, cadetblue 75%, lightgray 0); }
意思是：颜色渐变方向从上到下，开始0~25% 的颜色是cadetblue ，到25%后开始lightgray延续到50%，再从50%开始颜色cadetblue到75%，接着75%后以lightgray至结束。

上边css各加上 background-size: 30px 30px; 属性后，会变成

因为初始间隔半分比不同，加上相同background-size 后间隔数也会不同。

所以实现横向和竖向条纹，可以利用不同的方法：

横向和竖向：

方法一：background: linear-gradient(to top, cadetblue 25%, lightgray 0,lightgray 50%, cadetblue 0, cadetblue 75%, lightgray 0);
background-size: 30px 30px;

方法二：background: linear-gradient(to top, cadetblue 50%, lightgray 0);
background-size: 30px 30px; }

斜向：

这个不能使用两个参数的css样式，需要从0_25%50%_75%0：

background: linear-gradient(45deg, cadetblue 25%, lightgray 0, lightgray 50%, cadetblue 0, cadetblue 75%, lightgray 0);

background-size: 30px 30px;

注意：度数每加180度，条纹起始方向仍然一致，而对角第一个间隔的颜色会相反。比如45deg和225deg的左下角处起始颜色不一样。而度数每加90度，斜纹起始方向相反。

本文转载自： https://blog.csdn.net/asheandwine/article/details/79040836

CSS之linear-gradiend ——实现条纹背景效果相关推荐

css 实现条纹背景效果
css 实现条纹背景效果 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-afpF5YHe-1633685072007)(https://ws4.sinaimg.cn/l ...
html中背景条纹效果,css 条纹背景效果
条纹背景是基于渐变背景. CSS代码 .bg{ height: 100px; width: 200px; background: linear-gradient(#fb3,#58a); } 将这两个色 ...
CSS图像绘制之：条纹背景（转）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>漂亮的 ...
css：linear-gradient实现水平条纹背景，垂直条纹背景，斜向条纹背景
一.水平条纹效果: <html> <head> <style type="text/css"> div { font-size:100px; t ...
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
前言一直对渐变背景这块比较感兴趣,但是因为每天加班实在太忙了,任务也比较多.所以就只能下班的时间研究渐变背景这方面的知识,一来满足了自己的好奇心,二来可以更加了解这方面的知识.跟更多不断学习的小伙伴 ...
css黑白条纹_CSS中的条纹
css黑白条纹作者克里斯·科耶尔最近更新时间 2014年7月18日翻译自: https://css-tricks.com/stripes-css/ css黑白条纹
CSS 条纹背景秘探
CSS 条纹背景秘探 CSS 条纹背景秘探 CSS 线性渐变 background-size 实现条纹垂直条纹斜向条纹 CSS 条纹背景秘探要想在网页中实现条纹图案,通常,我们的方法是创建一个 ...
背景的css代码,创建炫酷 CSS 背景效果的 10 个代码片段
在现代网页设计中,大背景图设计非常流行.随着高清(现在是4K)显示器的出现,越来越多的网页设计师使用大背景图来填充屏幕. 为什么? 因为这样可以造成很大的视觉冲击力,并有助于更好的传递所要表现的内容. ...
CSS应用：线性渐变
渐变是从一种颜色逐渐蜕变到另一种颜色.线性渐变就是沿着一根轴线(水平.垂直或某个角度)改变颜色,从起点到终点颜色进行顺序渐变. 在这里,我将介绍在CSS中怎么实现线性渐变的方法. 线性渐变创建线性渐 ...

CSS之linear-gradiend ——实现条纹背景效果

所以实现横向和竖向条纹，可以利用不同的方法：

斜向：

CSS之linear-gradiend ——实现条纹背景效果相关推荐

最新文章

热门文章