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

[huruji]

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 上测试均有这个问题。

Refs: Box shadow spread bug in WebKit in iOS 7 on Retina iPads

-webkit-appearance —— webkit外观样式属性

7阶层叠水平

产生层叠上下文的条件

[huruji]

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

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

[huruji]

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

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

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