Published on

总结一些不常用的css 有一些存在兼容问题

Authors
  • avatar
    Name
    lcorz
    Twitter

css变量

主要浏览器已经都支持

声明变量的时候，变量名前面要加两根连词线（--）。

// 全局声明
:root{
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
}
// 局部声明
body {
  --foo: #7F583F;
  --bar: #F7EFD2;
}

var()函数用于读取变量

a {
  color: var(--foo);
  text-decoration-color: var(--bar);
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分。var()函数还可以用在变量的声明。

color: var(--foo, #7F583F);
font-family: var(--font-stack, "Roboto", "Helvetica");
:root {
  --primary-color: red;
  --logo-text: var(--primary-color);
}

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--primary', '#7F583F');

// 读取变量
document.body.style.getPropertyValue('--primary').trim();
// '#7F583F'

// 删除变量
document.body.style.removeProperty('--primary');

计算函数

减号、加号运算符首尾必须要有空格

.selector {
  width: calc(100% / 3 * 2 - 5px + 10px)
}

禁用鼠标事件、移动端禁止图片长按保存功能

/* PC、移动端都禁止点击事件 */
.no-events {
  pointer-events: none
}

/* 移动端禁止长按呼出菜单 似乎仅适用于ios*/
.no-callout {
  -webkit-touch-callout: none
}

补充一点pointer-events: none的使用就是用来穿透遮罩选择底部元素pointer-events穿透

移动端禁止用户长按文字选择功能

.unselect {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none
}

移动端重置某些样式

-webkit-appearance:none常用于IOS下移除原生样式

input[type=button]{
	-webkit-appearance:none;
	outline:none
}

修改input placeholder 样式

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;

文字渐变

.text-gradient {
  background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(63, 52, 219)), to(rgb(233, 86, 86)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

text-gradient

文字使用背景图

.text{
  background-image: url('');
  background-size: cover;
  -webkit-background-clip: text;
  color: transparent
}

多行省略

.hide-text-n {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: n;
  overflow: hidden
}

移动端顺畅滚动

.scroll-touch {
  -webkit-overflow-scrolling: touch
}

吸顶操作(好东西倒是好东西,兼容性不咋地)

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;  // 可以通过top控制位置
}

sticky

硬件加速(使用gpu加速 而不是使用浏览器软件渲染引擎)

尽量避免使用left和top制作动画尽量用transform

.cube {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0)
}

锚点平滑过渡(支持度也不咋地)

smooth允许滚动时采用平滑过渡，而不直接翻到相应位置

body {
  scroll-behavior: smooth;
}

改变input光标颜色(兼容还凑合)

.input {
  caret-color: red
}

倒影

方向: above | below | left | right 间隔 遮罩

div {
  -webkit-box-reflect: below 0 -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, 0.3))
}

-webkit-box-reflect

filter

blur(px) 给图像设置高斯模糊
brightness(%) 亮度
contrast(%) 对比度
grayscale(%) 灰度图像
sepia(%) 转褐色
等等等... 可自行查阅

demo document

overscroll-behavior

overscroll-behavior属性允许用户在到达内容的顶部或底部时覆盖浏览器的默认行为 —— 溢出滚动行为。

  1. auto - 默认。元素的滚动会传播给祖先元素。
  2. contain - 阻止滚动链接。滚动不会传播给祖先，但会显示元素内的原生效果。例如，Android 上的炫光效果或 iOS 上的回弹效果，当用户触摸滚动边界时会通知用户。
  3. none - 和 contain 一样，但它也可以防止节点本身的滚动效果。

overscroll-behavior

object-fit

类似background-size

object-fit: fill; // 填满
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down; // contain none 取小的那个

object-fit

object-position

类似background-position

object-position

backface-visibility

hidden 不可见 visible 可见

div{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
-moz-backface-visibility:hidden; 	/* Firefox */
-ms-backface-visibility:hidden; 	/* Internet Explorer */
}

backface-visibility