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

时间：2016-12-01 09:27:56 阅读：217 评论：0 收藏：0 [点我收藏+]

一、条纹背景

利用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;
        }

技术分享

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

标签：三角形 bat line tag ima height 定义函数实现分享

原文地址：http://www.cnblogs.com/cqhaibin/p/6120516.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行