1. 第一章
css编码技巧
第二章 边框与背景
- 半透明边框
hsla - 多重边框
box-shadow outline - 灵活的背景定位
background-position css3该属性可以指定偏移量，background-origin 指定背景图片相对于哪一个角进行偏移，和padding搭配使用calc()方法的使用，calc(100% - 偏移量) 搭配background-position使用 - 边框内圆角
一个元素box-shadow outline 结合使用 注意： 大小问题，勾股定理两个元素可以通过背景色出效果 - 条纹背景
linear-gradient background-size 搭配使用倾斜条纹使用repeating-lineat-gradient灵活的同色系条纹，background和background-image搭配使用
- 复杂的背景图案
（1）网格中的方格用background和background-image， background-size搭配使用，background-image中有多个line-gradient 以逗号分隔，搭配使用，/
（2）类似于辅助线，background、background-image和background-size搭配使用
//（3）波点 background和background-image， background-size、background-position 搭配使用，可以利用两个叠加形成更好看的/
(4)棋盘，使用三角形拼接形成 - 伪随机背景
background和background-image， background-size搭配使用， 蝉原则，根据质数设置background-size, - 连续的图像边框
两种方法
上述方法可以衍生出“蚂蚁行军”
！！注意斜纹变虚线，理解background-position百分比的含义；
顶部边框裁切
第三章 形状
- 自适应的椭圆
半椭圆
四分之一椭圆
- 平行四边形
这种情况内容也会被旋转，不符合设计要求！
解决办法： 使用伪元素
菱形图片：
使用强大的clip-path属性，点对应的连线就是变换的图形；
- 切角效果
无弧形切角
弧形切角：
颜色比较突兀，为了明显，有点丑哈哈！
内联svg与border-image方案：
之后补充，
裁切路径方案: 使用clip-path（）属性；
- 梯形标签页
- 简单的饼图 css或者svg方法，更推荐svg方法
第四章 视觉效果
-
单侧阴影 理解box-shadow的几个参数的含义
邻边阴影
双侧阴影，以上阴影均利用四个值进行实现，并且可以有多个阴影，以逗号分隔； -
不规则阴影： 解决有箭头，虚线边框，或者折角的图形阴影。
使用filter: drop-shadow() 里面的参数和box-shadow一样，只是没有阴影尺寸和inset，且不能用逗号分开，filter: blur() grayscale() drop-shadow();滤镜可以串联使用； -
染色效果 （图片的饱和度变化）
基于滤镜的方式：filter: sepia(1) saturate(4) hue-rotate(295deg);可以有动画效果，
基于混合模式： mix-blendmode 可以为整个元素设置混合模式， background-blend-mode 可以为每层
背景单独指定混合模式。 前者需要将图片包裹在div中，向上包裹元素混合！后者需要将图片作为背景图片，向下背景元素混合，且无动画效果！
三种方法各有利弊！ -
毛玻璃效果
使用伪元素和filter属性完成 -
折角效果
使用伪元素和渐变完成，
第五章 字体排印
-
连字符断行 hyphens: auto;
-
插入换行： 使用伪元素的content: ‘\A’ 和white-space:pre; 搭配使用，
-
文本行的斑马条纹：background-size: auto 3em;
background-origin: content-box;
background-image: linear-gradient(rgba(0,0,0,.2) 50%,
transparent 0);三者结合使用，单位设置为em，可以使条纹宽度随着文字大小的变化而变化 -
调整tab的宽度： 利用tab-size属性，用于解决展示代码或者原样输出
-
连字：font-variant-ligatures: common-ligatures
no-discretionary-ligatures
no-historical-ligatures; 使用此属性解决问题 -
华丽的& 符号：@font-face {
font-family: Ampersand;
src: local(‘Baskerville-Italic’),
local(‘GoudyOldStyleT-Italic’),
local(‘Palatino-Italic’),
local(‘BookAntiqua-Italic’);
unicode-range: U+26;
}
h1 {
font-family: Ampersand, Helvetica, sans-serif;
} -
自定义下划线：
background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;
使用此方法生成下划线
- 现实中的文字效果：
凸版印刷效果：background: hsl(210, 13%, 60%);
color: hsl(210, 13%, 30%);
text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
空心字效果： 使用svg（推荐） 或者使用text-shadow
文字外发光效果：filter: blur(） 或 text-shadow
文字凸起效果： 阴影逐渐加深，用mixin设置
环形文字： 利用svg
第六章 用户体验
-
选用合适的鼠标光标
-
扩大可点击区域
-
自定义复选框
-
开关式按钮，谨慎使用
-
通过阴影弱化背景，相当于添加蒙层，（1）使用伪元素，但是无法捕获点击事件，阻止鼠标交互（2）box-shadow;box-shadow: 0 0 0 50vmax rgba(0,0,0,.8);不阻止鼠标交互，而且配合固定定位使用，或者在没有滚动条的页面中使用。(3)dialog::backdrop {
background: rgba(0, 0, 0, .8);
} -
通过模糊来弱化背景：box-shadow和filter
-
滚动提示 ：使用两层背景，控制
-
交互式的图片对比控件：
-
范围输入控件方式：书中有很详细的解答！提醒自己要回顾。
第七章 结构与布局
-
自适应布局 width: min-content
-
表格的自适应宽度 table {
table-layout: fixed;
width: 100%;
} -
根据兄弟元素的数量来设置样式： li:only-child {
/* 只有一个列表项时的样式 */
} -
根据兄弟元素的数量范围来匹配元素： nth-child(2n+1)）；；n+b 这种形式的表达式可以选中从第 b 个
开始的所有子元素。 举例来说， :nth-child(n+4) 将会选中除了第一、 二、
三个子元素之外的所有子元素 -
满幅的背景，定宽的内容：footer {
padding: 1em;
padding: 1em calc(50% - 450px);
background: #333;
}三行代码解决，calc()函数的用处真多！ -
垂直居中： （1）基于绝对定位的解决方法：main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} transfrom基于自身的宽高进行百分比计算
（2）基于视口单位，但有限，只能使用在视口中main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
（3） 基于flexBox解决方案，很推荐，body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
} flex和margin： auto;结合使用，并且上下和左右都会居中；；；或者使用main {
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
} 此中运用了justify-content属性和align-items属性 -
紧贴底部的页脚 使用flex
第八章 过渡与动画
- 缓动动画
使用cubic-bezier属性，设置速度时间函数 - 弹性过渡，
- 逐帧动画 step()属性和png图片结合
- 闪烁效果： 动画和逐帧动画结合
- 打字动画 让容器宽度成为动画的主体
- 状态平滑的过渡 animation-play-state: paused;使用此属性控制动画
本书结束！之后还会再看一遍。加油
扫一扫
5213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
