CSS 那些你可能不知道的事情

Question

user-select

是否允许用户选中文字，这在 防止用户 copy 内容 的时候非常有用，值有以下：

• none ： 不允许用户选中文字
• text：允许用户选中文字，默认
• all：一并选中，当双击子元素或者上下文时，那么包含该子元素的最顶层元素也会被选

自定义 scrollbar

webkit浏览器很早开始就支持自定义滚动条，利用提供的伪元素即可实现，scrollbar 提供的部分有

• ::-webkit-scrollbar { /* 1 */ } // 滚动条整体部分
• ::-webkit-scrollbar-button { /* 2 */ } // 滚动条两端的按钮
• ::-webkit-scrollbar-track { /* 3 */ } // 滚动条的轨道
• ::-webkit-scrollbar-track-piece { /* 4 */ } / 轨道除去小方块的部分
• ::-webkit-scrollbar-thumb { /* 5 */ } // 滚动条里的小方块
• ::-webkit-scrollbar-corner { /* 6 */ } // 横竖滚动条的交汇处
• ::-webkit-resizer { /* 7 */ } // 拖动调整元素大小的小控件

在浏览器中分别对应的部分是：

同时为这些元素提供了很多不同状态的伪类选择器，具体内容可看 custom-scrollbars-in-webkit、scrollbar

ios 下 box-shadow 不生效的 bug 解决

可以按照以下步骤：

1. 添加 -webkit- 浏览器前缀

2. 添加 -webkit-appearance:none：消除ios下的默认样式。-webkit-appearance 是用来改变按钮和其他控件的外观，使其外观类似于原生控件。

3. 添加至少为1px的圆角 border-radius: 1px

4. 如果是有模糊距离或者拓展的阴影尺寸设置，没有偏移值，如 box-shadow: 0 0 30px 300px #000，至少添加1px的偏移值

5. 如果阴影尺寸设置得非常大，如 box-shadow: 0 0 0 999999px #000，同时又设置了border-radius 为四个相同的值，那么请确保这个值和圆角值的和不超过 2044px，或者保证四个值不是相同的。如：

不生效的设置：

box-shadow: 0px 0px 0px 99999px #000;
border-radius: 10px 10px 10px 10px;

生效的设置：

box-shadow: 0px 0px 0px 99999px #000;
border-radius: 10px 10px 10px 9.9999px;

生效的设置：

box-shadow: 0px 0px 0px 2034px #000;
border-radius: 10px 10px 10px 10px;

2044px 这个边界值我是在 iphone 8 ios 11.4.1 和 iphone 6s plus ios 11.4.1 上测试均有这个问题。

相关介绍

• Box shadow spread bug in WebKit in iOS 7 on Retina iPads
• -webkit-appearance —— webkit外观样式属性

7阶层叠水平

产生层叠上下文的条件

Answer 1

contentEditable的元素使用css轻松实现placeholder

<div class="textarea" bindtap="addContentPtag" placeholder="{{placeholders.content}}" contenteditable="true"></div>

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
}

Answer 2

flex布局下超出显示省略号失效

这个时候需要为这里的文字外层套一层标签如，div