zoukankan      html  css  js  c++  java
  • css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法。

    更进一步的话,应该就是斑马线的实现了,只要多谢几遍,其实也没什么难度。

    最近在学习《css揭秘》,里面关于linear-gradient的用法,真的让人有大开眼界的感觉。

    在他讲解的切角效果的章节里面,扩展几个css图形变化。

    1、单个切角

    background: linear-gradient(-45deg, transparent 15px, #58a 0);
    

      通过调整角度,可以做成不同角度的切脚效果,调整transparent后面的数字值,可以调整切角效果的大小。

    2、两个切角

    background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
                linear-gradient(45deg, transparent 15px, #58a 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    

      在超过一个切角的效果的时候,就需使用css3的background应用多层背景的特性来完成多重渐变,从而实现多个切角,并且要确保背景不得重复(background-repeat),划分每个背景图片的大小(background-size)。

    下面实现的效果也还都属于简单效果,也是在不断重复渐变,并确认大小。

    利用角度确定切角形成的角度大小,利用transparent后面的值,确定切角形成的形状大小,利用left,right, top, bottom确定切角在每一个切片区的位置。

    这个也属于四个切角效果,唯一要点是把切角都放在一个角落里面,导致看起来就是个菱形的效果,如果将颜色改变一下,就是我们正常看见的一个正规的合乎视觉的菱形。

    background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
                linear-gradient(60deg, transparent 15px, #58a 0) top right,
                linear-gradient(-120deg, transparent 15px, #58a 0) bottom left,
                linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    

    background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
                linear-gradient(60deg, transparent 15px, #58a 0) bottom left,
                linear-gradient(-120deg, transparent 15px, #58a 0) top right,
                linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    

      

    background: linear-gradient(-45deg, transparent 15px, #58a 0) top left,
                linear-gradient(45deg, transparent 15px, #58a 0) top right,
                linear-gradient(-90deg, transparent 10px, #58a 0) bottom left,
                linear-gradient(90deg, transparent 10px, #58a 0) bottom right;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    

    内凹圆角的实现

    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
                radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
                radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
                radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    

      

    单个标签实现多个圆

    background: radial-gradient(circle at center center, transparent 15px, #58a 0) top left,
                radial-gradient(circle at center center, transparent 15px, #58a 0) top right,
                radial-gradient(circle at center center, transparent 15px, #58a 0) bottom left,
                radial-gradient(circle at center center, transparent 15px, #58a 0) bottom right;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    

    background: radial-gradient(circle at center right, transparent 15px, #58a 0) top left,
                radial-gradient(circle at center left, transparent 15px, #58a 0) top right,
                radial-gradient(circle at center left, transparent 15px, #58a 0) bottom left,
                radial-gradient(circle at center right, transparent 15px, #58a 0) bottom right;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    

      

    不断实验的话,能够发现更多更好玩的形状。

    补充一个线性渐变的使用场景,自定义文字下划线:

    <p class="text-decoraion">在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法。</p>
    .text-decoration{
        color: red;
        line-height: 2;
        background: linear-gradient(currentColor, currentColor) no-repeat  0 2.15em;
        background-size: 40px 1px;    
      }
    

      通过background-position的位置,定位下划线所在的位置,通过background-size的第一个值width设置下划线长度,第二个值height设置下划线粗细,可以很细粒度的控制下划线的长宽和位置。

      

  • 相关阅读:
    tryparse的用法,^0*[1-9]d*$
    寻找指定的进程然后杀死的代码写法
    P2421 [NOI2002]荒岛野人
    P2568 GCD
    P1445 [Violet]樱花
    P3119 [USACO15JAN]草鉴定Grass Cownoisseur
    P1314 聪明的质监员
    P3811 【模板】乘法逆元
    P3943 星空
    P3225 [HNOI2012]矿场搭建
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/6108236.html
Copyright © 2011-2022 走看看