美文网首页
《CSS 揭秘》- 背景与边框 - 第二章

《CSS 揭秘》- 背景与边框 - 第二章

作者: noyanse | 来源:发表于2018-04-17 11:46 被阅读0次

    css3图案库:
    http://lea.verou.me/css3patterns/
    http://bennettfeely.com/gradients
    svg图案库: https://philiprogers.com/svgpatterns/
    统计css代码文件体积:http://bytesizematters.com./

    半透明边框

    背景知识:RGBA/HSLA 颜色
    transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值
    假设我们想给一个容器设置一层白色背景和一道半透明白色边框,body
    的背景会从它的半透明边框透上来。我们最开始的尝试可能是这样的:

    border: 10px solid hsla(0,0%,100%,.5);
    background: white;
    

    但这么写并没有效果,但我们的边框其实是存在的,默认情况下,背景会延伸到边框所在的区域下层。
    解决办法:background-clip
    这个属性的初始值是border-box ,意味着背景会被元素的 border box(边框的外沿框)裁切掉。
    如果不希望背景侵入边框所在的范围,我们要做
    的就是把它的值设为padding-box ,这样浏览器就会用内边距的外沿来把背景裁切掉。

      border: 10px solid hsla(0,0%,100%,.5);
      background: white;
      background-clip: padding-box;
    
    image.png

    多重边框

    背景知识:
    box-shadow 的基本用法

    background: yellowgreen;
    box-shadow: 0 0 0 10px #655,
     0 0 0 15px deeppink,
     0 2px 5px 15px rgba(0,0,0,.6);
    

    灵活的背景定位

    • background-position 的扩展语法方案
    background: url(code-pirate.svg) no-repeat #58a;
    background-position: right 20px bottom 10px;
    
    • background-origin 方案
      background-position 是以 padding box 为准
      如果把它的值改成 content-box(参见下面的代码),我们在 background-position 属性中使用的边角关键字将会以内容区的边缘作为基准(也就是说,此时背景图片距离边角的偏移量就跟内边距保持一致了)
    padding: 10px;
    background: url("code-pirate.svg") no-repeat #58a
     bottom right; /* 或 100% 100% */
    background-origin: content-box;
    
    • calc() 方案
      把背景图片定位到距离底边 10px 且
      距离右边 20px 的位置。如果我们仍然以左上角偏移的思路来考虑,其实
      就是希望它有一个 100% - 20px 的水平偏移量,以及 100% - 10px 的垂直
      偏移量。谢天谢地,calc() 函数允许我们执行此类运算,它可以完美地在
      background-position 属性中使用:
    background: url("code-pirate.svg") no-repeat;
    background-position: calc(100% - 20px) calc(100% - 10px);
    

    边框内圆角

    box-shadow:<offset-x> <offset-y> <blur> <spread> <color> || <position>
    阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;被想象成从元素到阴影的距离;阴影颜色;阴影的位置(inset);

    image.png

    条纹背景

    https://jsfiddle.net/noyanse/epzv2doq/18/
    因为渐变是一种由代码生成的图像,我们能像对待其他任何背景图像那样对待它,而且还可以通过 background-size 来调整其尺寸

    image.png

    如果某个色标的位置值比整个列表中在它之前的色标的位置值都要
    小,则该色标的位置值会被设置为它前面所有色标位置值的最大值。
    这意味着,如果我们把第二个色标的位置值设置为 0,那它的位置就
    总是会被浏览器调整为前一个色标的位置值

    .stripe{
      background: linear-gradient(#fb3 50%, #58a 0);//效果和之前一样
      background-size: 100% 30px;
    }
    

    如果要创建超过两种颜色的条纹,也是很容易的。举例来说,下面的代
    码可以生成三种颜色的水平条纹

    垂直条纹
    .vertical-stripe{
      background: linear-gradient(to right, /* 或 90deg */
       #fb3 50%, #58a 0);
      background-size: 30px 100%;
    }
    
    斜条纹
    .repeating-stripe{
      background: repeating-linear-gradient(60deg,
       #fb3, #fb3 15px, #58a 0, #58a 30px);
    }
    
    灵活的同色系条纹
    .homochromy-stripe{
      background: repeating-linear-gradient(30deg,
       #79b, #79b 15px, #58a 0, #58a 30px);
    }
    

    这个有缺点,就是要改变颜色要改4处,还有更好的方法:把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹:

    .homochromy-stripe-better{
      background: #58a;
      background-image: repeating-linear-gradient(30deg,
       hsla(0,0%,100%,.1),
       hsla(0,0%,100%,.1) 15px,
       transparent 0, transparent 30px);
    }
    

    复杂的背景图案

    CSS 图案可以算是一个值得使用 CSS 预处理器(比如 Sass,http://sass-lang.com)来减少代码冗余的案例,因为最终图案越复杂,相应的代码就会变得越来越不DRY。

    网格
    background: white;
    background-image: linear-gradient(90deg,
     rgba(200,0,0,.5) 50%, transparent 0),
     linear-gradient(
     rgba(200,0,0,.5) 50%, transparent 0);
    background-size: 30px 30px;
    

    质数是一些整数,除了 1 和自身之外,它们无法被其他任何数字整除。举例来说,最小的10 个质数分别是 2、3、5、7、11、13、17、19、23 和 29。另一方面,相对质数是一种数字之间的关系,而不是单个数字自身的属性。构成相对质数的这些数字没有公约数,但它们自己是可以有多个约数的(比如说,10 和 27 是相对质数,但它们都不是质数)。很显然,一个质数跟其他所有数字都可以构成相对质数。
    这个技巧被 Alex Walker 定名为“蝉原则”,他最先提出了通过质数来
    增加随机真实性的想法。请注意这个方法不仅适用于背景,还可以用于其他
    涉及有规律重复的情况。

    • 在照片图库中,为每幅图片应用细微的伪随机旋转效果时,可以使
      用多个 :nth-child(a) 选择符,且让 a 是质数。
    • 如果要生成一个动画,而且想让它看起来不是按照明显的规律在
      循环时,我们可以应用多个时长为质数的动画。(可以在 play.
      csssecrets.io/cicanimation 看到一个示例。)

    相关文章

      网友评论

          本文标题:《CSS 揭秘》- 背景与边框 - 第二章

          本文链接:https://www.haomeiwen.com/subject/vweukftx.html