冷门CSS

2019-07-16

1. css实现简单箭头

a. 上下箭头

border: 15px solid transparent;
border-top-color: blue;
position: relative;
top: 15px;
border-right-width: 18px;
border-left-width: 18px;

b. 左右箭头

display: inline-block;
border: 20px solid transparent;
border-left-width: 0px;
border-right-color: blue;

2. 滚动条样式

::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。
::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece ：内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。
::-webkit-scrollbar-thumb ：滚动条里面可以拖动的那部分
::-webkit-scrollbar-corner ：边角，两个滚动条交汇处
::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
	width: 10px; /*对垂直流动条有效*/
	height: 10px; /*对水平流动条有效*/
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: rosybrown;
	border-radius: 3px;
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
	border-radius: 7px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #E8E8E8;
}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
	background-color:cyan;
}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
	background:khaki;
}

3. 去掉苹果给input自动加上的阴影效果

input {
	-webkit-appearance: none; /* Gecko内核 */
	-moz-appearance: none;/* WebKit/Blink 浏览器内核 */
}

4. 修改placeholder样式

::-webkit-input-placeholder { /* WebKit browsers */
	color: red;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: red;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: red;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: red;
}

5. 隐藏video下载标志

Chrome浏览器下使用video元素会自动出现下载标志，但一般不想让用户下载视频。

video::-internal-media-controls-download-button {
	display:none;
}

video::-webkit-media-controls-enclosure {
	overflow:hidden;
}

video::-webkit-media-controls-panel {
	width: calc(100% + 30px);
}

6. 清除手机Tap事件后Element 时候出现的一个高亮

1	-webkit-tap-highlight-color: rgba(0,0,0,0)

7. pointer-events指针事件

auto: 与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none: 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

1
2
3

a {
	pointer-events: none;
}

添加了这个样式后，链接就会失效

甚至鼠标悬浮在这个链接上都不会变成pointer的光标样式

8. counter css计数器

counter()，使用它，你能方便的在页面标题，区块和其它各种连续出现的页面内容上添加序号。有了它，你就不必限制于只能使用ol来实现这个效果，你可以更灵活的在页面上使用自定义数字序列。

关键就是它真的很简单：在:before伪类里的content属性加入counter()：

body {
	counter-reset: heading;
}
h4:before {
	counter-increment: heading;
	content: "Heading #" counter(heading) ".";
}

9. content ::after中的属性

例如，想去显示h3标题上的data-prefix 属性的值，你可以写成这样：

1
2
3

h3:before {
	content: attr(data-prefix) " ";
}

10. 用伪类来显示打印时a标签的链接:

@media print {
a[href]:after {
  content: " (" attr(href) ") ";

  }
}