box-shadow

css有5种不同的position属性值 我们不会讨论inherit，因为顾名思义，它就是继承了父元素的值，而且在比较老的IE版本中，支持情况也不好。 任何元素的position属性的默认值都是static。所谓的static定位就是元素在文档流中。当然了，这完全取决于你的HTML结构。 另一个值你肯定见过，它就是fixed。说白了，它就是把一个对象钉在背景上，因此无论你把它放在哪，它就会一直在那。我们经常在sidebar的导航元素中看到它的身影，当页面向下滚动了很远的距离，这时候我们想回到顶部，如果没有一个fixed的导航，这种用户体验是很差的。 前面这三个值都很浅显易懂，接下来是绝对定位和相对定位。我们会单独的解释这些值，并且会讨论它们如何配合使用。 绝对定位 使用绝对定位，你可以让一个元素脱离文档流，并且把它放在页面上某个指定的位置。为了了解它如何工作，我们创建了一个简单的无序列表。 正如我们说过的，列表项（list item）默认的定位方式是static，这就意味着它们会跟随标准的文档流。下面我对其中一项使用绝对定位。 如你所见，第4项完全脱离了文档流，并且位于浏览器窗口的左上角。请注意，即使有其他内容占据了这个位置，这个元素也不在乎。当我们使用绝对定位时，它不会影响文档流中的其他元素，也不会被别的元素影响。 使用绝对定位的原因是我们想精确的定位，通过top、bottom

效果预览 在线演示 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/zjoOgX 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cPvMzTg 源代码下载 本地下载 请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/005-sleek-sliding-toggle-checkbox 代码解读 定义 dom，是嵌套了3层的容器： <div class="checkbox"> <div class="inner"> <div class="toggle"></div> </div> </div> 居中显示： html, body, .checkbox, .checkbox .inner, .checkbox .inner .toggle { height: 100%; display: flex; align-items: center; justify-content: center; } 画出外侧椭圆： .checkbox { width: 10em;

box-shadow: h-shadow v-shadow blur spread color inset; 以上六个值的含义： h-shadow 水平阴影的位置，允许负值； 　　　　　　　　　　　 v-shadow 垂直阴影的位置，允许负值； 　　　　　　　　　　　 blur 阴影模糊程度； 　　　　　　　　　　　 spread 阴影扩展尺寸； 　　　　　　　　　　　 color 阴影颜色； 　　　　　　　　　　　 inset 设置为内阴影（默认为外阴影）； 例子： 往左—第一个值为负 往右—第一个值为正 往上—第二个值为负 往下—第二个值为正 box-shadow:-20px 0 2px 0 red; box-shadow:20px 0 2px 0 red; box-shadow:0 -20px 2px 0 red; box-shadow:0 20px 2px 0 red; 往四周—第一第二个值都为0 box-shadow:0 0 30px 0 red; 来源： CSDN 作者： 有蝉 链接： https://blog.csdn.net/qq_37899792/article/details/103474187

水平居中 行内元素 .parent { text-align: center; } 块级元素（注意子元素要设置宽度） .parent { text-align: center; } .child { width: 100px; margin: auto; border: 1px solid blue; } 垂直居中 张鑫旭 绝对定位 + margin:auto .parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } table 布局 .parent { display: table; width: 80px; height: 40px; } .child { display: table-cell; vertical-align: middle; } 多行文字 table /* 多行文字 */ .parent { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; } .child {

预览地址： https://web.lieme.cn/cssDemo/cssdemo.html github地址: https://juejin.im/post/5dee20936fb9a01638079d52 前端常用的CSS代码 1、垂直居中对齐 .vc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .vc { position:absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin:-50px 0 -50px; } 复制代码 2、全屏显示 html, body { position: fixed; width: 100%; height: 100%; } div { height: 100%; } 复制代码 3、不同a标签链接使用不同样式 // link a[href^="http://"]{ background: url(link.gif) no-repeat center right; } // emails a[href^="mailto:"]{ background: url(email.png) no-repeat center right; } // pdfs a[href$

一、半透明边框 默认情况下背景的颜色会延伸至边框下层。在css3中我们可以设置background-clip:padding-box(这个属性的默认值为border-box)来裁剪，从而取消默认行为。 下面介绍实现半透明边框的两种方式： 1.使用rgba方式 border:10px solid rgba(255,255,255,0.5) 使用hsla方式 background:white; border:10px solid hsla(0,0%,100%,0.5); background-clip:padding-box; HSLA(H,S,L,A)的参数说明： H：Hue(色调) 0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360 S：Saturation(饱和度)。取值为：0.0% - 100.0% L：Lightness(亮度)。取值为：0.0% - 100.0% A：Alpha透明度。取值0~1之间。 二、多重边框 (1)box-shadow实现多重边框 <!--dom--> <div class="box"> </div> <!--style--> .box { background: yellowgreen; box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;