流萤梦的博客

实现阴影，先来了解一下box-shadow这个属性。box-shadow属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。好了，准备工作都做好了，那就直接进入主题吧。

简单说一下背景，就是需要实现一个展开收起的按钮。那我第一个想到的方法，可不就是border自己画嘛。

最近项目重构，其中有个模块涉及到的交互全改了，跟css挂钩的点很多，这里简单做个记录。要实现圆首先得知道这个属性，引用MDN上的解释：CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个（椭）圆与边框的交集形成圆角效果。简单来说就是边框的四个角是由这个属性控制的。效果如下：当然，这四个边的圆角也可以自由组合设置，这里就不一一举例了。

元素水平垂直居中的场景很常见，常用的方法如下：（以下方法在chorme测试可行）

伪元素实现三角形

如何使用border和linear-gradient实现三角形

先来盘一盘我自己遇到的问题场景，大概如图所示：前提条件：box使用了flex布局，让div1和div2两端对齐，box未设置宽度，其宽度是自适应的，div2的宽度是固定的，div1的宽度理想状态是box的宽度减去div2的固定宽度。简单来说就是，div2固定宽度，div1宽度自适应占满剩余空间。问题现状：div1长度没超长的时候，没有问题。但当div1的内容长度超长了，div2设置的宽度失效，会被压缩。而问题的原因主要在于flex的flex-grow和flex-shrink属性。先.

最近，在做一个需求，其中涉及到了一个下划线的问题，大概效果要长这样：（前面的文案打了马赛克，可能这个图看着有点奇怪，这不重要，主要是看虚线）看到这个图的第一反应就是，害，不就是个边框吗，这有啥难的？......

盒模型的组成：content（内容） padding（内边距） border（边框） margin（外边距）那常见的盒子模型有哪些呢？主要是两种：标准盒模型和怪异盒模型。它俩有什么区别呢？区别主要在于宽高的计算。1、标准盒模型如上图，我们可以很明显的看到这里的宽高就是content的宽高。宽：width = content（内容）的宽高：height = content（内容）的高2、怪异盒模型（IE盒模型）如图所示，怪异盒模型的宽高是包括了content、.

说来惭愧，最近刚犯错这个错误。为避免再犯，还是记录一下吧。在出现z-index设置不起作用，没有效果的情况下，我们首先检查z-index设置的元素是否存在以下两种状况：该元素是否设置了定位 该元素的父级是否已经设置了z-index（检查需比较的元素是否同在一个层叠上下文）为什么要检查这两种情况呢？我们先来说结论：z-index只作用在使用了定位的元素上，也就是我们经常用的position属性，static除外（如果不是定位元素，那我们设置z-index是不会起作用的） 同一个父级元素下的元

不知道你有没有遇到这样的情况，设置了font-size为10px，打开控制台审查元素也显示的是10px，但浏览器渲染的字体大小还是没有发生改变。这是因为浏览器（以Chrome为例，其他没测试过）在中文语言下展示的最小字体是12px，低于12px的，都会当作12px处理。这里提到的中文语言，跟页面上展示的内容没有什么关系，而是取决于用户在chrome://settings/languages中设置的默认语言。如果要在浏览器解决这个问题，有两种方案：方法一使用transform: sc.

::-webkit-input-placeholder { color: red;}:-moz-placeholder {/* Firefox 18- */ color: red;}::-moz-placeholder{/* Firefox 19+ */ color: red;}:-ms-input-placeholder { color: red;}

看到这篇文章就知道，我已经踩坑了，hhh，分享一下解决方案：text-align的属性，它控制的是行内内容如何相对它的父级元素对齐。关于text-align的其他取值这里就不再赘述了，主要说一下两端对齐的justify。需要注意的是text-align: justify对最后一行无效！！！既然是最后一行不生效，那解决方案很显然也是从最后一行入手咯！这里先放一个简单的例子：<div> <span>这是一个测试例子这是一个测试例子这是一个测试例子这是一个

文本溢出显示省略号这个样式，我真的是逢写必忘，也是服了，简单整理一下：单行文本 单行文本相对简单，三行代码就能搞定，喏：overflow: hidden;text-overflow:ellipsis;white-space: nowrap; 当然，这里有一个前提是要设置宽度width，敲重点！ 最后的效果图如下： 多行文本 方...