《CSS Secrets》读书笔记(3)

三年重构老司机二刷《CSS Secrets》觉得有些东西还是应该记录下来,本文内容来自书籍《CSS Secrets》中文名叫《CSS揭秘》,做笔记的过程中我会根据自己的过往经验加上自己的理解和看法,用通俗的表达对一些知识点进行解释。本书的对象是有一定CSS开发经验的人,如果你是新手,阅读起来可能有点吃力,同时,笔记也是针对我个人的查漏补缺,有些知识点并不会记录进去。


形状

自适应的椭圆

  1. 宽高相同,border-radius 大于等于一半就是一个正圆,用户代理会按宽高比例减小各个边框半径带下,直到不重叠为止。
  2. border-radius 一般是简写形式,可以通过 / 单独指定水平和垂直半径,水平半径 / 垂直半径
  3. border-radius 接受百分比值
  4. 展开式属性,支持最多两个值,必须使用空格分隔。分别表示水平半径和垂直半径。而 border-radius 那种斜杠 / 分隔的写法这里是不支持的,只能是空格。
    border-top-left-radius
    border-top-right-radius
    border-bottom-right-radius
    border-bottom-left-radius
  1. border-radius 水平半径 / 垂直半径,各支持“上右下左”四个值写法
border-radius: 左上角水平圆角半径大小 右上角水平圆角半径大小 右下角水平圆角半径大小 左下角水平圆角半径大小/左上角垂直圆角半径大小 右上角垂直圆角半径大小 右下角垂直圆角半径大小 左下角垂直圆角半径大小;
  1. 上半椭圆
    border-radius: 50% / 100% 100% 0 0;
  2. 左半椭圆
    border-radius: 100% 0 0 100% / 50%;
  3. 左上四分之一圆
    border-radius: 100% 0 0 0;

平行四边形

在这里插入图片描述

  1. 平行四边形是矩形的父集,各条边两两平行,但是角度不一定是直角。
  2. CSS创建平行四边形的思路是通过 skew 实现。
  3. 直接将整个元素倾斜的话,元素的内容也会倾斜。
  4. 我们可以将内容单独用一层结构包裹在倾斜元素内,然后将内容反向倾斜
  5. 按照这种思路我们可以将倾斜元素作为子元素,这样就不会影响内容了,所以用伪元素代替是个好办法

嵌套元素方案:

<a href="#yolo" class="button">
    <div>Click me</div>
</a>

.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

伪元素方案:

<a href="#yolo" class="button">
    Click me
</a>

.button {
    position: relative;
    /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

菱形图片

在这里插入图片描述
示例:https://codepen.io/xiangshuo1992/pen/jXZRmq

变形方案:
基于上面平行四边形的方案,菱形可以通过正方形旋转得到,再将子元素图片反方向矫正,不过这里有个问题是图片最大宽度是与边长相等的,我们期望的是与对角线相等,所以我们可以通过放大图片来实现。

<div class="picture">
    <img src="adam-catlace.jpg" alt="..." />
</div>
.picture {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}

裁切路径方案:
还有一个兼容性不是很好的实现方案,只能作为渐进增强的方案了。clip-path 属性可以创建一个只有元素的部分区域可以显示的剪切区域,MDN文档示例:https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

还可以加动画呢!

img {
    clip-path: polygon(50% 0, 100% 50%,
    50% 100%, 0 50%);
    transition: 1s clip-path;
}
img:hover {
    clip-path: polygon(0 0, 100% 0,
    100% 100%, 0 100%);
}

视觉效果

单侧投影

示例:https://codepen.io/xiangshuo1992/pen/JwvPPa

一般我们使用 box-shadow 的方法是,指定三个长度值和一个颜色值:
box-shadow: 2px 3px 4px rgba(0,0,0,.5);
在这里插入图片描述
box-shadow 的参数列表是 box-shadow: X Y 模糊半径R1 扩张半径R2 颜色值;

所以上面的css属性值会生成一个相对于元素向右偏移2px,向下偏移3px,模糊半径为4px的阴影,我们把阴影看做是一个元素的话,这个元素的尺寸相当于比原来的元素大4*2=8px。

注意:确切地说,我们将在顶部看到1px的投影(4px-3px)、在左侧看到2px(4px-2px)、在右侧看到6px(4px+2px)、在底部看到7px(4px+3px)。在实践中,投影看起来会比这些值稍小,因为投影的颜色在边缘处的过渡不是线性的,这跟渐变不一样。

如果要实现单侧投影,我们就需要用到第四个属性,扩张半径啦。这个参数会根据你指定的值去扩大或(当指定负值时)缩小投影的尺寸。很显然,当我们设置了模糊半径之后,我们只有将扩张半径设置为负数才能缩小阴影,那这个值具体是多大呢,只要小于模糊半径的相反数就可以了,比如这样设置:box-shadow: 0 5px 4px -4px black;
在这里插入图片描述

邻边投影

要实现只在两条邻边有 box-shadow ,最简单的办法就是在基础用法上面将X和Y的偏移量调整到大于模糊半径的值就行,但是我们会发现这样会造成元素有一个比较大的阴影,视觉效果达不到要求,这时我们可以考虑结合扩张半径属性来进行优化,利用扩张半径的负值来缩小阴影,具体数值该设置为多大呢,我们将偏移量调整为模糊半径的一半,扩张半径调整为模糊半径相反数的一半,比如:box-shadow: 3px 3px 6px -3px black; 就可以达到最终想要的效果了。
在这里插入图片描述

双侧投影

扩张半径在四个方向上的作用是均等的(也就是说,我们无法指定投影在水平方向上放大,而在垂直方向上缩小),唯一的办法是用两块投影(每边各一块)来达到目的。然后基本上就是把“单侧投影”中的技巧运用两次:box-shadow: 5px 0 5px -5px black, -5px 0 5px -5px black;
在这里插入图片描述

END.

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页