博客

1.禁止长按图片弹出菜单

img {
  -webkit-touch-callout: none; // 主要用于禁止长按菜单。主针对webkit内核的浏览器；=
}
/*或者 user-select , 是css3的新属性，用于设置用户是否能够选中文本*/
.img {
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

2.CSS之实现小于12px的字体

利用css3的缩放,实现10px的字体或图标

.smallFont{    
  　font-size:12px; 
    transform: scale(0.833333);
    -webkit-transform: scale(0.833333); // 利用css3的缩放，调整系数,实现10px的字体或图标
    -webkit-transform-origin-x: 0; // 缩放位置
    transform-origin: center center; // 保持居中
  	-webkit-transform-origin: center center;
}

3.文字溢出隐藏并显示省略号–CSS省略号

单行文本文字超出隐藏并显示省略号

：

.box {
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

多行文本(展示2行)文字超出隐藏并显示省略号：

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

如果使用SCSS 或Less

/**
    CSS省略号-- 默认一行，可根据传递的参数设置展示几行
    参数: {Param} Number
    用例--超出两行使用省略号: @include ellipsis(2);
*/
@mixin ellipsis($lineClamp: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $lineClamp;
    line-clamp: $lineClamp;
    -webkit-box-orient: vertical;
}

4.CSS使用::-webkit-scrollbar设置滚动条样式

修改某个容器的滚动条样式

.scrollDom::-webkit-scrollbar {
  width: 6px; // y轴
  height: 6px; // x轴
}
.scrollDom::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}
.scrollDom::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgb(178, 178, 186);
}

全局修改滚动条样式：在全局样式表中添加以下内容

::-webkit-scrollbar {
  width: 6px; // y轴
  height: 6px; // x轴
}
::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: rgb(178, 178, 186);
}

5.阿拉伯语布局

阿拉伯人的阅读习惯是从右往左，通过以下设置即可实现：

.Arabic_css {
  direction: rtl;
  unicode-bidi: bidi-override;
}

6.使用 linear-gradient 控制渐变背景或文本

6.1.使用 linear-gradient() 控制渐变背景

<div class="bruce" data-title="使用linear-gradient控制渐变背景">
	<div class="linear-gradient">渐变背景</div>
</div>

.linear-gradient{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 80px;
	font-weight: bold;
	height: 100%;
	background: linear-gradient(90deg, #09f, #66f,#f66, #f90, #3c9) left center/400% 400%;
	animation: animate 6s infinite;
}
@keyframes animate {
	0%,
	100% {
		background-position-x: left;
	}
	50% {
		background-position-x: right;
	}
}

6.2.使用 linear-gradient() 控制渐变文本

<div class="bruce flex-ct-x" data-title="使用linear-gradient控制渐变文本">
	<h1 class="linear-gradient">使用linear-gradient控制渐变文本</h1>
</div>

.linear-gradient{
	background-image: linear-gradient(90deg, #f90, #3c9);
	background-clip: text;
	line-height: 80px;
	font-size: 60px;
	color: transparent;
	animation: hueRotate 5s linear infinite;
}
@keyframes hueRotate {
	from {
		filter: hue-rotate(0);
	}
	to {
		// hue-rotate滤镜除了支持deg，还支持其它CSS3单位，比如圈数turn、弧度rad等
		filter: hue-rotate(360deg); // 360度旋转
	}
}