07月13, 2016

[读书笔记] CSS揭秘

本文主要是关于CSS揭秘这本书的读书笔记,如题。[我爱上了CSS我要嫁给它阿阿阿]

第一章 引言

  • perfect calc()

      width: calc(100% - 5px);
    
  • CSS自定义属性暨层叠式变量

      ul { --access-color: purple;}
      ol { --access-color: #ccc;}
      li { color: var(--access-color);}
    

第二章 背景与边框

透明背景

  • RGBA & HSLA

    • H--Hue 色调
    • S--Saturation 饱和度
    • L--Lightness 亮度
    • A--Alpha 定义透明度
  • [Key]background-clip

    • meaning 声明背景的渲染区域
    • value
      • border-box[default] 元素背景渲染至border
      • padding-box 元素背景渲染至padding
      • content-box 元素背景渲染至content
  • [Key]box-sizing[与本节无关,由于和background-clip相似所以放到一起]
    • meaning:声明该元素的width和height是否包含padding和border
    • value
      • content-box[default] 元素定义的width和height只是content的width和height
      • padding-box 元素定义的width和height是content+padding的width和height
      • border-box 元素定义的width和height是content+padding+border的width和height
    • tips: 也就是说,如果想让某个元素大小不随着padding和border的改变而改变,则应该设置box-sizing:border-box

多重背景和多重边框

CSS本身支持多重背景,只要通过逗号分隔就可以实现多重背景

background:url(a.jpg) top right / 2em 2em,
           url(b.jpg) bottom right / 2em 2em,
           url(c.jpg) bottom left / 2em 2em

tips:在简写属性中,background-size之前,还提供了background-position,同时用一个斜杠(/)分隔。这主要是为了告诉解析器这个属性是background-size而前面是background-position,从而防止解析器产生歧义。

但是对于边框并不支持逗号分隔定义多重边框。除了通过定义多个嵌套元素来使元素看起来像多重背景之外[导致结构冗余],更好的方式是通过定义box-shadow来模拟多重边框,因为box-shadow是支持都喊分隔语法的

  • [Key]box-shadow
    • params: none|h-shadow v-shadow blur spread color |inset|initial|inherit
      • none 无阴影
      • h-shadow 水平阴影位移
      • v-shadow 垂直阴影位移
      • blur 模糊半径
      • spread 阴影大小[允许负数]
      • color 阴影颜色
      • inset inner shadow instead of outer shadow

tips: 关于投影和边框的区别

  • 投影不会影响布局,不会受到box-sizing的影响。
  • 投影不会响应事件

双层边框

当只需要双层边框的时候可以用outline实现,优点是,可以得到各种样式的边框而不仅仅是实线边框

#tips-board {
    width: 300px;
    height: 180px;
    background: #655;
    outline: #fff dashed 2px;
    outline-offset: -25px;
    border-radius: 15px;
}

上面是一个可以拿来当提示板的样式,觉得不错,记录一下。 alt 由于outline是不会跟随border-radius变成圆角的,所以通过将outline-offset设置为负值,使描边处于元素内部,这样就可以做出一个不错的效果。

背景定位

  • [Key]background-position

    • meaning:设置背景图片位置
    • 旧版本value:
      • [left|right|center] [bottom|top|center]
        • e.g. left top
        • If you only specify one keyword,the other value will be 'center'
      • x% y% 居中是50% 50%
      • apx bpx 距离左边apx上边bpx
    • CSS3 value:
      • right apx bottom bpx
      • 旧版的background-position只支持相对于当前容器的左上角定位,当希望背景相对于右下角定位时,十分不方便。所以在新的标准中,支持了相对于任意一个角进行定位。
  • [Key]background-origin

    • meaning:设置背景图片是相对于谁的左上角定位
    • value:
      • padding-box[default] 背景图相对于padding进行位移
      • border-box 背景图相对于border进行位移
      • content-box 背景图相对于content进行位移
  • 当然除了改变背景所在的位置也可以用之前的calc()函数 e.g.

      div {
           background-position: calc(100% - 10px) calc(100% - 20px);
      }
    
  • 由于新的标准还未得到所有浏览器的支持,对于浏览器支持情况可以上这几个网站查看

边框内圆角

  • 上面提到过描边不会跟随元素的圆角走,所以边框内圆角可以用outline做边框,但是同时要注意outline的直角和元素的圆角位置会有空隙,所以应该设置一个与描边同色的box-shadow,其宽度为:$$ (\sqrt{2}-1)r $$
  • 设置前: alt
  • 设置后: alt
    #tips-board {
      width: 300px;
      height: 180px;
      background: #655;
      outline: tan solid 20px;
      border-radius: 15px;
      box-shadow: 0 0 0 10px tan;
    }
    

条纹背景

这一节主要是加深了对于linear-gradient的理解,这个属性不仅仅可以实现渐变色,还可以通过有技巧的设置参数来实现水平条纹、垂直条纹和斜向条纹

  • [Key]linear-gradient
    • meaning:设置渐变颜色
    • params:
      • 举例来说:background: linear-gradient(red 25%,blue 25%);的含义是该元素从坐标轴的0%-25%为红色,从25%-100%为蓝色。可以看到开始位置和结束位置省略了
      • 默认坐标轴为垂直的,可以通过linear-gradient(-45deg,red ...)来改变坐标轴的方向
      • 此时只生成了两条条纹,可以通过设置background-size : 100% 30px来控制条纹宽度,并且使其布满屏幕
      • 如果某个色标的位置比整个列表在它之前的色标的位置都要小,该色标的位置值会被设置为它前面所有色标中的最大值,也就是说linear-gradient(red 25%,blue 0) 等价于linear-gradient(red 25%,blue 25%)

但是仅凭linear-gradient无法实现除45度外的斜向条纹,此时需要用到repeating-linear-gradient。

  • [Key]repeating-linear-gradient
    • meaning:在坐标轴上无限循环某个渐变图案
    • params:该属性要求给出开始位置和结束位置background: repeating-linear-gradient(45deg,red 0,red 10px,blue 10px,blue 20px);

repeating-linear-gradient中设置的条纹宽度是相对于坐标轴,而linear-gradient中的条纹宽度则是相对于元素的边的,也就是说,当想要精准宽度的斜向条纹的时候,就需要使用前者了。但是由于前者每次至少需要给出四个色标,所以当创建水平或者垂直条纹时,使用linear-gradient比较合适。

Tips:同色系条纹的创建可以通过设置纯色背景再加白色透明条纹来实现。

  • 棋盘效果
#tips-board {
    background: #eee;
    background-image: linear-gradient(45deg,rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0),linear-gradient(45deg,rgba(0,0,0,.25) 25%, transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
    background-position: 0 0,15px 15px;
    background-size: 30px 30px;
}
  • 随机写出来的效果
#tips-board {
    height: 1000px;
    width: 100%;
    background: linear-gradient(#58a 30%,#655 30%,#fb3 50%) top right/100% 200px;
}
/*好喜欢这个随机出来的效果23333我爱CSS*/
  • 关于clip[废弃?]的四个参数参考系 alt

连续的图像边框

  • 应用场景:希望把某张图片当做边框而不是背景
  • 解决方案:将图片设置为背景,同时再设置一个白色过渡到白色的背景色,让图片背景通过border区域显示出来
#tips-board {
    margin: 40px;
    width: 300px;
    height: 180px;
    padding: 10px;
    border: 30px solid transparent;
    background: linear-gradient(white,white),
                url("1.jpg") 0 / cover;
    background-clip: padding-box,border-box;
    background-origin: border-box;
}

为什么加background-origin?

  • 不加 alt
  • alt

可以发现不加时的图片边框是诡异的,这是因为background-origin默认将背景放到了padding-box的左上角,所以虽然背景被设置为渲染至border-box,但是border部分的背景是通过图片平铺延伸得到的,所以会出现奇怪的效果。因此使用图片边框时,需要将background-origin设置为border-box。

alt

Tips:为什么不用border-image?

  • [Key]border-image
    • meaning:通过九宫格伸缩法,为元素添加图片背景。四个角的图片是不变的,可以通过改变参数来调整四条边的填充方式(repeat-平铺,round-整数倍平铺,stretch-拉伸) 所以如果使用了border-image,则基本的边框变动不大。不过我觉得,在没有强制要求的情况下,border-image用起来也是不错的。
  • 老式信封效果
#tips-board {
    margin: 40px;
    width: 300px;
    height: 180px;
    padding: 10px;
    border: 30px 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 / 200px 200px border-box;
}
  • 蚂蚁行军效果
#tips-board {
    margin: 40px;
    width: 300px;
    height: 180px;
    padding: 10px;
    border: 1px solid transparent;
    background: linear-gradient(white,white) padding-box,
                repeating-linear-gradient(-45deg,black 0,black 25%,transparent 0,transparent 50%) 0 / 20px 20px border-box;
    animation: ants linear 10s infinite;
}
keyframes ants{ to { background-position: 100%; } }

原理:默认的background-position为0% 0%,让它变为100% 100%后,背景从左上角向着右下角移动

形状

自适应的椭圆

  • border-radius可以单独指定水平半径和垂直半径 border-radius: 100px / 75px
  • border-radius可以接受百分比值 border-radius: 50% / 50%
  • border-radius可以分别指定四个角(从左上角开始,依顺时针) border-radius: 50% / 100% 100% 0 0

border-radius的由来:元素的圆角半径其实是指定的元素边框外侧拐角半径,所以当元素有边框的时候,元素本身的圆角半径会略小一点(等于 max(0, border-radius - border-width))

平行四边形

  • [Key]transform
    • meaning:让元素进行移动(translate),旋转(rotate),缩放(scale),倾斜(skew)

本文链接:http://crystalmiao.com/post/cssscrect.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。