1。第一章css编码技巧第二章边框与背景半透明边框hsla多重边框box-shadow轮廓灵活背景定位background-positioncss3这个属性可以指定偏移量，////background-origin指定背景图片相对于哪个角偏移,并使用////calc()方法与padding,calc(100%-offset)和background-position使用一个元素box-shadow在borderoutline内部有圆角结合使用注意：大小问题，勾股定理////两个元素可以使用背景色来产生条纹背景的效果linear-gradientbackground-size搭配使用////倾斜条纹使用repeating-lineat-gradient///灵活的条纹使用相同的颜色，使用背景和background-image一起创建复杂的背景图案（1）使用background和background-image，background-size用于grid中的正方形，background-image中使用多个line-gradient，以逗号分隔，组合使用tion,/////(2)类似于辅助线,background,background-image和background-size结合使用//////(3)圆点背景和background-image,background-size,background-position一起使用，可以使用两个叠加形成更好看的/////(4)棋盘，使用三角形拼接形成伪随机背景background和background-image，background-size一起使用，蝉原理，根据质数设置background-size，连续图片边框两种方法以上方法可以推导出“蚂蚁行军”！！注意斜纹转虚线，理解background-positionpercentage的含义；topbordercroppingChapter3shape-adaptive椭圆、半椭圆、四分之一椭圆、平行四边形这种情况下内容也会旋转，不符合设计要求！解决方案：使用伪元素菱形图像：利用强大的clip-path属性，点对应的连线即为变换后的图形；切角效果无弧切角弧切角：颜色比较突兀，为了显眼，有点难看哈哈！inlinesvg和border-image解决方案：稍后添加，剪切路径解决方案：使用clip-path()属性；梯形tab页的简单饼图css或svg方法，更推荐svg方法第四章视觉效果单边阴影理解box-shadow几个参数的含义AdjacentsideshadowsDoublesideshadows,上面的阴影是用四个值实现的,并且可以有多个阴影，用逗号隔开；不规则阴影：解决箭头、虚线边框或角图形阴影使用filter:drop-shadow()里面的参数和box-shadow一样，但是没有shadowsize和inset，不能用逗号分隔，filter:模糊()灰度()投影();过滤器可以串联使用；染色效果（图片的饱和度变化）基于滤镜方式：filter:sepia(1)saturate(4)hue-rotate(295deg);可以有动画效果，基于混合模式：mix-blendmode可以为整个元素设置混合模式，background-blend-mode可以为背景的每一层分别指定混合模式。前者需要将图片包裹在一个div中，将元素包裹起来混合！后者需要图片作为背景图，背景元素向下混合，没有动画效果！三种方法各有利弊！毛玻璃效果使用伪元素和滤镜属性来完成倒角效果。使用伪元素和渐变来完成，第五章TypographyHyphensbreaklineshyphens:auto;插入换行符：使用伪元素content:'A'和white-space:pre;搭配使用，斑马条纹为文字行：background-size:auto3em;背景来源：内容框；背景图像：线性渐变（rgba（0,0,0,.2）50%，透明0）；或者组合使用，单位设置为em，可以让条纹的宽度随着文字的大小而变化调整tab的宽度：使用tab-size属性解决显示代码或输出连字为它们是：font-variant-ligatures:common-ligaturesno-discretionary-ligaturesno-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{字体-family:Ampersand,Helvetica,sans-serif;}Customunderline:background:linear-gradient(gray,gray)no-repeat;background-size:100%1px;background-position:01.15em;text-shadow:.05em0白色，-.05em0白色；现实中使用此方法生成下划线TextEffect:LetterpressEffect:background:hsl(210,13%,60%);color:hsl(210,13%,30%);text-shadow:01px1pxhsla(0,0%,100%,.8);轮廓文字效果：使用svg（推荐）或使用text-shadow文字外发光效果：filter:blur()ortext-shadow凸起文字效果：阴影逐渐加深，圆形文字用mixin设置：使用svg第六章用户体验选择合适的鼠标光标扩大可点击区域自定义复选框切换按钮，慎用通过阴影弱化背景，相当于添加了Mask层，（1）使用了伪元素，但是不能捕捉点击事件，阻止了鼠标交互（2）box-shadow；盒子阴影：00050vmaxrgba（0,0,0,.8）；不阻止鼠标交互，固定定位使用，或者在没有滚动条的页面中使用(3)dialog::backdrop{background:rgba(0,0,0,.8);}通过模糊弱化背景：box-shadowandfilter滚动提示：使用两层背景控制交互式图片对比控制：范围输入控制方法：书上有很详细的解答！提醒自己回头看看。第七章结构与布局自适应布局宽度：min-content表格自适应宽度table{table-layout:fixed;width:100%;}根据兄弟元素个数设置样式:li:only-child{/only列表项的样式//根据兄弟元素个数范围匹配元素:nth-child(2n+1));;n+b这种表达形式可以选择从b开始的所有子元素。例如:nth-child(n+4)会选择除第一、二、三子元素外的所有子元素的全角背景，以及固定宽度的内容：footer{padding:1em;padding:1emcalc(50%-450px);background:#333;}三行代码解决，calc()函数太好用了！垂直居中：（1）基于绝对定位的解决方案：main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}transfrom是根据自身的width和height百分比计算（2）是基于视口单位的，但是有限制，只能在视口m??ain{width:18em;填充：1em1.5em；保证金：50vh自动0；transform:translateY(-50%);}(3)基于flexBox方案，强烈推荐，body{display:flex;min-height:100vh;margin:0;}main{margin:auto;}flexand保证金：自动；组合使用，会上下左右居中;;;或者使用main{display:flex;align-items:center;justify-content:center;width:18em;height:10em;}其中justify-content属性和align-items属性用于粘贴到页脚的底部usingflex#第八章transition和animationeasing动画没讲完，过两天再更新，有些地方比较粗糙，等你再看的时候再补全！
