Css3新特性总结之边框与背景(二)

一、条纹背景

  • 利用background为linear-gradient函数实现,linear-gradient取值如下:
    • <angle>:角度,渐变的方向
    • to left right top bottom
    • color:指定颜色
    • color-stop:指定渐变的起止颜色
    • length:用长度值指定起止色的位置,不可为负值
    • percentage:用百分比指定起止色的位置
    • 语法格式:linear-gradient([[<angle>|to <side-to-corner>],]? <color-stop>[,<color-stop>]+)
    • side-to-corner:[left|right] || [top||bottom]
    • color-stop: <color>[<length>|<percentage>]?
  • 示例代码(斜角条纹):
background: linear-gradient( 40deg, #fb3 5px, #58a 15px);
width: 200px;
height: 100px;
margin: 0px auto;
background-size: 30px 30px;
  • 当linear-gradient添加多组值的时候,前面的值会覆盖后面的,如下代码:
background-image:linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0)

说明:linear-gradient(45deg, transparent 75%, #bbb 0)的信息会被linear-gradient(45deg, #bbb 25%, transparent 0) 覆盖。

  • 示例代码:
width: 200px;
            height: 200px;
            background: #eee;
            background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0),
            linear-gradient(45deg, #bbb 25%, transparent 0),
            linear-gradient(45deg, transparent 75%, #bbb 0);
            background-position: 0px 0px, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;
            background-size: 25px 25px;

代码解释:

* image与position一对一的相互参照;image实现图形,position实现定位 * 每个图形都是一个小的三角形,两个三角形相互拼接成一个正方形,然后近一步定位即可。 * 注意角度的旋转,他是顺时针的。

  • linear-gradient还可以合并写法,也就是定义一个角度,后面跟随多组颜色值
linear-gradient(45deg, #bbb 25%, transparent 0, 
\transparent 50%, #bbb 0, transparent 75%, #bbb 0)
  • css可以用\(反斜杠)进行换行,如上
  • 不规则条纹
    • 主要利用background-size多组值实现,第组值按照自定的间距进行平铺
    • 最与数学中的最大公约倍数有关联,他们会以最大分倍数的宽度重复, 如果让他看上去更随机就需要避开此条规则
    • 示例代码:
.wrap{
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image: 
                linear-gradient(90deg,#fb3 10px, transparent 0),
                linear-gradient(90deg,#ab4 20px, transparent 0),
                linear-gradient(90deg,#655 30px, transparent 0);
            background-size: 40px 100%, 60px 100%, 80px 100%;
        }
        .wrap-thr{
            margin-top: 5px;
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image: 
                linear-gradient(90deg,#fb3 10px, transparent 0);
            background-size: 40px 100%;
        }
        .wrap-one{
            margin-top: 5px;
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image:linear-gradient(90deg,#ab4 20px, transparent 0);
            background-size: 60px 100%;
        }
        .wrap-two{
            margin-top: 5px;
            width: 600px;
            height: 100px;
            background: hsl(20, 40%, 90%);
            background-image:linear-gradient(90deg,#655 30px, transparent 0);
            background-size: 80px 100%;
        }
  • 复杂边框背景
    • 方案一 利用border-image实现,border-image使用的是九宫格伸缩法
    • 方案二 利用背景多层覆盖原理实现,先实现多层有颜色的背景,最后加上一层白色的。
.wrap{
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background: linear-gradient(white,white) padding-box,
            repeating-linear-gradient(-45deg,red 0, red 12.5%, 
            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        }
        .wrap-one{
            margin-top: 5px;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:             repeating-linear-gradient(-45deg,
            \transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        } 
        .wrap-two{
            margin-top: 5px;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:  
            repeating-linear-gradient(-45deg, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0 / 5em 5em;
        }
        .wrap-thr{
            margin-top: 5px;
            width: 200px;
            height: 50px;
            padding: 1em;
            border: 1em solid transparent;
            background:             repeating-linear-gradient(-45deg,transparent 0, red 50%) 0 / 5em 5em;
        }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据结构与算法

Stirling数

第一类: 定义 第一类Stirling数表示表示将 n 个不同元素构成m个圆排列的数目。又根据正负性分为无符号第一类Stirling数 ? 和带符号第一类...

338100
来自专栏编程坑太多

D3.js仪表盘的实现

58620
来自专栏用户2442861的专栏

python数字图像处理(12):基本图形的绘制

skimage.draw.set_color(img, coords, color)

20720
来自专栏Android机动车

用数学思维实现雷达分析图

前段时间回看里约奥运会的国球比赛,岛国媒体给我龙队一个响亮的称号—— 六边形战士 !

12220
来自专栏HTML5学堂

原生JS | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):在上周当中,我们用jQuery实现了 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项 - 的特效,今天我们来讲讲原生JS的实现方...

70880
来自专栏欧阳大哥的轮子

路径布局-基于数学函数的视图布局方法

路径布局MyPathLayout是MyLayout布局体系中的第7种布局体系,在这种布局体系中您只需要提供一个坐标轴、一个曲线函数、以及视图之间的距离这三个要素...

8020
来自专栏听雨堂

从MapX到MapXtreme2004[11]-坐标概论

        坐标的问题是Mapxtreme中最郁闷的问题,前几天在这上面耗了很多时间,没有搞定,今天又是不得不钻研,还好,小有心得。         1、...

22370
来自专栏落影的专栏

Metal图像处理——颜色查找表(Color Lookup Table)

一张1024x1024的普通图片,是由1024 * 1024=1048576个像素点组成,每个像素点包括RGBA共32bit,常见的图像处理是对相邻像素点颜色、...

44060
来自专栏王金龙的专栏

svg.js教程及使用手册详解(二)

上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法。

37740
来自专栏进击的君君的前端之路

CSS理解之border

17630

扫码关注云+社区

领取腾讯云代金券