乐趣区

css-secrets (css揭秘) 知识点目录,值得深入学习!

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-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 {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
# 第八章 过渡与动画
缓动动画
未完,两天后会更新完全,有些地方也比较粗略,后期再看一遍的时候进行补全!

退出移动版