css样式小技巧

1、改变鼠标样式

把鼠标改成自己喜欢的小图片

*{cursor:url(https://blog-static.cnblogs.com/files/blogs/725648/cursora.ico),auto;}

2、鼠标选中样式

鼠标选中样式，背景颜色，文字颜色的修改

/* webkit, opera, IE9 */
::selection { background:#807dd4; color: #fff;}
/* mozilla firefox */
::-moz-selection { background:#807dd4; color: #fff; }

3、自定义页面滚动条

自定义页面滚动条样式，div什么都可以用，将html换成div的class名称即可

html::-webkit-scrollbar-thumb {
	height: 40px;
	border-radius: 16px;
	background-color: #ccc;
}
html::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	border-radius: 2px;
}

4、CSS变量

通过样式表中任何位置的关键字重用

:root {
  --main-color: #06c;
  --accent-color: #999;
}
h1, h2, h3 {
  color: var(--main-color);
}
footer span{
 color: var(--accent-color);
}

5、解决ios滑动时无缓冲问题

-webkit-overflow-scrolling: touch; 

6、强行换行css

有时候做页面，测试打一个很长很长的字符或者数字来，文字就会显示在页面外面，这时就需要一个强制换行

white-space:pre-wrap;   /* css3.0 */ 
white-space:-moz-pre-wrap;   /* Firefox */ 
white-space:-pre-wrap;    /* Opera 4-6 */ 
white-space:-o-pre-wrap;   /* Opera 7 */ 
word-wrap:break-word;   /* Internet Explorer 5.5+ */

7、文本溢出显示省略号

width宽度，-webkit-line-clamp要显示几行，自行设置

width: 200px; overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 3;

8、不能选中文本

user-select设置不能选中文本

-moz-user-select: none;  -webkit-user-select: none;  -ms-user-select: none;  -khtml-user-select: none;  user-select: none;

9、偏移自身50%

transform: translate(-50%,-50%);

10、苹果手机底部小横线

padding-bottom: calc(0 + constant(safe-area-inset-bottom));
padding-bottom: calc(0 + env(safe-area-inset-bottom));

11、动画效果

 transition: all 0.15s linear;

12、投影

box-shadow: 0 6rpx 22rpx rgb(0 0 0 / 25%);

13、文字描边

// 

//	这里使用了外描边文字效果
//
.plan-bg2 {

font-family: Heavy;

font-size: 30px;

font-weight: 900;

/* 设置描边宽度及颜色 /

text-stroke: 2px #2173FF;

/ 兼容Webkit(Chrome/Safari)内核浏览器的写法 /

-webkit-text-stroke: 2px #2173FF;

}

/ 通过属性选择器结合伪元素before 实现文字外描边效果 /

[data-content]::before {

/ attr()是用来获取被选中元素的某属性值,并且在样式文件中使用 /

content: attr(data-content);

position: absolute;

/ 实现元素外描边的关键 /

-webkit-text-stroke: 0;

/ 文本颜色 */

color: #fff;

}

14、缩放

scale: 1.2;

15、横向滚动

父：
white-space: nowrap;
overflow-x: auto;
子：{
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

16、段落缩进前两个字符

text-indent: 28px;

17、翻转

transform:rotateX(180deg);

18、文字渐变色

    background-image: linear-gradient(to right, #ce25c0, #d6e56e, #ee2cb3, #deae42);
    -webkit-background-clip: text;
    color: transparent;
    display: inline-block;
    animation: colorflashing-444ad1fa 1.5s ease-in-out infinite;
    -webkit-animation: colorflashing-444ad1fa 1.5s ease-in-out infinite;

19、渐变色

background: linear-gradient(90deg, #ffc046, #ff7d04);
background-image: linear-gradient(270deg, #4940AC 0%, #00A38E 100%);

20、渐变色 背景图共存

background: url('https://szy-mms.oss-cn-beijing.aliyuncs.com/assets/expert-images/static/images/bg/capital-bg.png')
          no-repeat center / 100%,
        linear-gradient(90deg, #ffc046, #ff7d04);

后期遇到比较不错的，会不断的完善