第一章 引言
01.书中提到的会常用的函数
02.自制提示框
提示框三角实现方式
-
移动位置ss
-
当不设置宽高时 设置padding会自动填充div 形成一个正方体
-
设置背景色为继承 提高代码健壮性
-
去除右边和下边边框
-
旋转—样式变为三角且覆盖原来边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="callout"></div> <style> /* 提示框主体*/ .callout { position: relative; width: 200px; height:120px; background-color: red; border: 1px solid blue; } /* 提示框三角 01.移动位置 02.当不设置宽高时 设置padding会自动填充div 形成一个正方体 03.设置背景色为继承 提高代码健壮性 04.去除右边和下边边框 05.旋转---样式变为三角且覆盖原来边框 */ .callout::before { content: ""; position: absolute; top: 10rem; left: 1em; padding: 40px; background: inherit; border: inherit; border-right: 0; border-bottom: 0; /* transform: rotate(45deg); */ } .callout::after { content: ""; position: absolute; top: -.4em; left: 1em; padding: .35em; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg); } </style> </body> </html>
第二章 背景与边框
01.使元素背景不覆盖其边框
默认情况下border下是被覆盖的背景色,正常情况下是没什么影响的,但当我们想设置边框透明度时,就会有些麻烦产生。
从背景与边框( 第三版)( http://w3.org/TR/css3-background) 开
始, 我们可以通过 background-clip 属性来调整上述默认行为所带来的不
便。 这个属性的初始值是 border-box, 意味着背景会被元素的 border box
( 边框的外沿框) 裁切掉。 如果不希望背景侵入边框所在的范围, 我们要做
的就是把它的值设为 padding-box, 这样浏览器就会用内边距的外沿来把背
景裁切掉。border: 10px solid hsla(0,0%,100%,.5); background: white; background-clip: padding-box;
否则
测试实例2
不设置背景裁剪
/* 测试主体*/ .callout { position: relative; width: 200px; height:200px; background-color: red; border: 1px solid rgb(0, 0, 255,.2); /* 不添加背景裁剪 */ /* background-clip: padding-box; */ }
设置背景裁剪
/* 测试主体*/ .callout { position: relative; width: 200px; height:200px; background-color: red; border: 1px solid rgb(0, 0, 255,.2); /* 添加背景裁剪 */ background-clip: padding-box; }
02.巧妙添加多重边框
01.单重实线投影模拟边框
/* 测试主体*/ background: yellowgreen; box-shadow: 0 0 0 10px #655;/* 一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值, 得到的“投影”其实就像一道实线边框 */
02.多重实线投影模拟边框
box-shadow 是层层叠加的, 第一层投影位于最顶 层, 依次类推。 因此, 你需要按此规律调整扩张半径。 比如说, 在前面的代
码中, 我们想在外圈再加一道 5px 的外框, 那就需要指定扩张半径的值为
15px( 10px+5px)。 如果你愿意, 甚至还可以在这些“边框”的底下再加一
层常规的投影:background: yellowgreen; box-shadow: 0 0 0 10px #655, /* 第一层褐色边框*/ 0 0 0 15px deeppink,/* 第二层粉色边框*/ 0 2px 5px 15px rgba(0,0,0,.6);/* 第2层额外添加偏下的阴影*/
注意事项
- 投影的行为跟边框不完全一致,因为它不会影响布局,而且也不会受到box-sizing属性的影响。不过,你还是可以通过内边距或外边距(这取决于投影是内嵌和还是外扩的)来额外模拟出边框所需要占据的空间
- 投影上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件,比如悬停或点击。如果这一点非常重要,你可以给box-shadow属性加上inset关键字,来使投影绘制在元素的内圈。请注意,此时你需要增加额外的内边距来腾出足够的空隙。
03.outline 方案模拟双重边框
在某些情况下, 你可能只需要两层边框, 那就可以先设置一层常规边
框, 再加上 outline( 描边) 属性来产生外层的边框。 这种方法的一大优
点在于边框样式十分灵活, 不像上面的 box-shadow 方案只能模拟实线边框
( 假设我们需要产生虚线边框效果, box-shadow 就没辙了)。 如果要得到图
2-6 的效果, 代码可以这样写:background: yellowgreen; border: 10px solid #655;/* 第一层border边框*/ outline: 5px solid deeppink;/* 第二层outline边框 这次不用计算叠加距离了*/
附:outline可以达到缝边效果
/* 测试主体*/ .callout { position: relative; width: 200px; height:200px; background-color: red; border: 1px dashed rgb(0, 0, 0); outline: 5px solid red;/*缝边效果 没咋看出来有啥奇特的*/ }
03.灵活改变背景定位
01.背景位置的语法拓展
从
background-position: bottom right;
到
background-position: right 20px bottom 10px;
更改更具有代码健壮性
02.修改背景图片基准
background-origin: content-box;
03.calc()方案
background: url("code-pirate.svg") no-repeat; background-position: calc(100% - 20px) calc(100% - 10px)
04.边框内圆角
01.老实人写法
用两个元素实现 一个元素作为矩形背景 一个元素作为圆角边框
<div class="something-meaningful"><div> I have a nice subtle inner rounding, don't I look pretty? </div></div> /* 矩形背景 */ .something-meaningful { background: #655; padding: .8em; } /* 圆角边框 */ .something-meaningful > div { background: tan; border-radius: .8em; padding: 1em; }
其实老实人挺好的 背景矩形边框还可以使用渐变色,酷炫拽
02.单元素实现
最终代码
<div class="something-meaningful"> I have a nice subtle inner rounding, don't I look pretty? </div> <style> .something-meaningful { background: tan; border-radius: .8em; padding: 1em; box-shadow: 0 0 0 .6em #655;/* 填充缝隙 */ outline: .6em solid #655; } </style>
css新版本 已修正 outline会跟着内边框一起变动 目前只能用老实人写法了
.something-meaningful { background: tan; border-radius: .8em; padding: 1em; outline: .6em solid #655;/* 随着边框一起变动 */ }
06.条纹背景
01.水平条纹
核心思路:渐变色的平铺(背景色默认为平铺)+渐变色标的重叠(渐变色只存在于两个色标距离之间,距离足够小 表现为实线)
a.最基础等宽条纹
<div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; background: linear-gradient(#fb3 50%, #58a 50%); } </style>
b.调整背景尺寸实现平铺
<div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; background: linear-gradient(#fb3 50%, #58a 50%); background-size: 100% 30px; } </style>
c.不等宽平铺条翁
<div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; /*background: linear-gradient(#fb3 30%, #58a 30%);*/ /*进阶写法*/ background: linear-gradient(#fb3 30%, #58a 0); background-size: 100% 30px; } </style>
4.三色条纹
<div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; background: linear-gradient(#fb3 33.3% , #58a 0, #58a 66.6%, yellowgreen 0); background-size: 100% 45px; } </style>
02.垂直条纹
相较横向条纹,需要调整渐变方向和背景尺寸
<body> <div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; background: linear-gradient(to right,#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0); background-size: 45px 100%; } </style> </body>
03.斜向条纹
01.不动脑筋写法
在完成了水平和垂直条纹之后,我们可能会顺着往下想:如果我们再次改变background-size的值和渐变的方向,是不是就可以得到斜向(比如45°)的条纹图案呢?
<div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; background: linear-gradient(45deg,#fb3 50%, #58a 0); background-size: 30px 30px; } </style>
可以发现,这个办法行不通。原因在于我们只是把每个“贴片”1①内部的渐变旋转了45°,而不是把整个重复的背景都旋转了。试着回忆一下我们以前用位图来生成斜向条纹时是怎么做的吧,做法类似下图。
02.半正确写法
单个贴片包含了四条条纹,而不是两条,只有这样才有可能做到无缝拼接。它正是我们需要在CSS代码中重新实现的贴片,因此我们需要增加一些色标:
<div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; /*添加四个等长的条纹 注意真正的条纹宽度有个换算关系 45°角*/ background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0); background-size: 30px 30px; } </style>
缺陷: 目前只能绘制45°角条纹 其他的角度无法实现(条纹会乱码)
03.最终鲁棒性写法
linear-gradient()和radial-gradient()还各有一个循环式的加强版:repeating-linear-gradient()和repeating-radial-gradient()。它们的工作方式跟前两者类似,只有一点不同:色标是无限循环重复的,直到填满整个背景
background: repeating-linear-gradient(45deg,#fb3, #58a 30px); /*等价于*/ background: linear-gradient(45deg, #fb3, #58a 30px, #fb3 30px, #58a 60px, #fb3 60px, #58a 90px, #fb3 90px, #58a 120px, #fb3 120px, #58a 150px, ...);
最终写法
<div class="something-meaningful"> </div> <style> .something-meaningful { width: 100px; height: 100px; background: repeating-linear-gradient(45deg, #fb3 0 15px, #58a 15px 30px); } </style>
第一个明显的好处就是减少了重复:我们要改动任何颜色时只需要修改一处,而不是原来的三处。另外一点也很重要,我们现在是在渐变的色标中指定长度,而不是原来的background-size。这里的background-size是初始值,对渐变来说就是以整个元素的范围进行填充。这意味着代码中的长度值更加直观,因为这些长度是直接在渐变轴上进行度量的,直接代表了条纹自身的宽度。我们再也不需要计算什么根号了!不过这还不是最大的好处。最大的好处在于,现在我们可以随心所欲地改变渐变的角度了,指哪儿打哪儿,再也不需要苦苦思索如何生成一个无缝贴片
04.灵活改变同色系条纹
<div class="something-meaningful"> </div> <style> /* 不再为每种条纹单独指定颜色,而是把最深的颜色指定为背景色,同时把半透明白色的条纹叠加在背景色之上来得到浅色条纹 结果看起来跟图2-37是一模一样的,但我们现在只需要修改一个地方就可以改变所有颜色了。我们还得到了一个额外的好处,对于那些不支持CSS 渐变的浏览器来说,这里的背景色还起到了回退的作用 */ .something-meaningful { width: 100px; height: 100px; background: #58a; //关键点 background-image: repeating-linear-gradient(30deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px, transparent 0, transparent 30px); } </style>
07.复杂背景图案
01.桌布背景
<div class="something-meaningful"> </div> <style> /* 桌布方案 */ .something-meaningful { width: 100px; height: 100px; background: white; background-image: linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),/* 90°方向是从左到右*/ linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);/* 不写方向 默认方向从上到下 头bottom*/ background-size: 30px 30px;/* 圈定一块渐变的范围 */ } </style>
02.白线桌布
<div class="something-meaningful"> </div> <style> /* 桌布方案 */ .something-meaningful { width: 100px; height: 100px; background: #58a; /* 背景色 */ background-image: linear-gradient(white 1px, transparent 0), /* 横向白线 */ linear-gradient(90deg, white 1px, transparent 0); /* 纵向白线 */ background-size: 30px 30px; /* 圈定一块放款的大小 默认设置了repeat */ } </style>
第三章 形状
04.切角效果
01.一个切角
.react{ width: 300px; height: 200px; /* 0表示10px之后直到100%全为红色 */ background: linear-gradient(-45deg,transparent 10px,red 0); }
02.四个切角
.react { width: 300px; height: 200px; background: linear-gradient(-45deg, transparent 10px, red 0) bottom right, linear-gradient(45deg, transparent 10px, red 0) bottom left, linear-gradient(135deg, transparent 10px, red 0) top left, linear-gradient(-135deg, transparent 10px, red 0) top right;/* 0表示10px之后直到100%全为红色 注意添加方位?*/ background-repeat: no-repeat; background-size: 50% 50%;/* 圈定了背景色延伸的范围 */ }
03.环形切角
.react { width: 300px; height: 200px; background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left, radial-gradient(circle at top right, transparent 15px, #58a 0) top right, radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left; background-repeat: no-repeat; background-size: 50% 50%; /* 圈定了背景色延伸的范围 */ }
04.切角—内联 SVG 与 border-image 方案
.react { width: 300px; height: 200px; border: 20px solid #58a; border-image: 1 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"> <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/> </svg>'); background: #58a; background-clip: padding-box; /* 没怎么看懂 */ }