文章目录

让文字或div水平垂直居中 溢出文本不换行显示省略号 线性渐变 改变text框中placeholder属性样式 让文字垂直居中 动画过渡 内容相对父标签居中 圆角边框和阴影 页面背景不平铺并且根据窗口调整尺寸 页面背景不平铺，且固定，不改变图片大小 让内容根据父容器容量布局，不要改变父容器尺寸，溢出内容直接隐藏 清除提示框（点击就出现个框框，清除掉） 形状变换 设置高斯模糊 文本域不可调节大小 控制鼠标指针样式 给div加滚动条 修饰滚动条 文本自动换行 隐藏原标签，使用定位标签lable为其设置样式 元素在主轴（页面）上居中排列 设置段落尺寸（最小高度等） 转换元素行，块性质 移除默认样式 让标签不可选中 让文本不可选中

让文字或div水平垂直居中

    /* flex 布局 */
  display: flex;
  /* 实现垂直居中 */
  align-items: center;
  /*实现水平居中*/
  justify-content: center;

溢出文本不换行显示省略号

/* 溢出文字开启省略号显示 */
white-space: nowrap;/*关闭自动换行*/
text-overflow: ellipsis;/*文字溢出内容处理为省略号*/
overflow: hidden;/* 通过设置overflow 开启BFC */

线性渐变

/*从左向右渐变*/
background-image: linear-gradient(to right, red , yellow);

改变text框中placeholder属性样式

<input type="text" name="" placeholder="Username"/>
::placeholder{/*属性选择器，选择所有placeholder属性*/
   color:rgba(0,0,0,.5)//颜色设置为黑色，透明度0.5
            }

让文字垂直居中

height: 100px;
line-height: 100px;//保证和height相同高度即可

动画过渡

transition: 0.5s;//动画过渡时间0.5s

内容相对父标签居中

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%，-50%);

圆角边框和阴影

border-radius: 20px;//圆角边框
border:10px solid rgba(255,255,255,.2);/*10px 实线 颜色为白色，透明度0.2的边框 */
box-shadow: 10px 10px 15px rgba(0,0,0,.5);/*给元素添加 水平位置10px 垂直位置10px 阴影大小15px 透明度0.5的黑色阴影 */

页面背景不平铺并且根据窗口调整尺寸

background-size: cover;/*背景大小为正好填满标记*/
/* 背景不平铺 */
 background-repeat: no-repeat;

页面背景不平铺，且固定，不改变图片大小

/* 背景响应式调整显示比例 */
 background-size: cover;
 background-image: url(../image/20080810042853.jpg);
 /* 背景不平铺 */
 background-repeat: no-repeat;
 /* 背景固定，附着 */
 background-attachment: fixed

让内容根据父容器容量布局，不要改变父容器尺寸，溢出内容直接隐藏

/* 弹性布局 */
  display: flex;
  box-sizing: border-box;//并排放置带边框元素时，自动进行匹配
  /* 溢出隐藏 */
  overflow: hidden

清除提示框（点击就出现个框框，清除掉）

outline: none;/*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/

形状变换

transform: translateX(-50%) scaleX(2);//水平方向平移-50%，水平缩放2倍

设置高斯模糊

filter: blur(0.2px);//高斯模糊0.2px

文本域不可调节大小

resize: none;

控制鼠标指针样式

cursor: pointer;//将鼠标变成手

给div加滚动条

<div style="height:300px;overflow-y:auto"></div>//设置为auto自动，将在超过指定高度是添加滚动条

修饰滚动条

  /* 滚动条 */
::-webkit-scrollbar {/* 这是针对缺省样式 (必须的) */
   width: 15px;
}
::-webkit-scrollbar-track {/* 滚动条的滑轨 */
   background-color: rgba(0,0,0,0.2);
   border-radius: 20px;
}
::-webkit-scrollbar-thumb {/* 滑块 */
   background-color: rgba(0, 0, 0, 0.5);
   border-radius: 20px;
}
::-webkit-scrollbar-button {/* 滑轨两头的监听按钮 */
     background-color: rgba(255, 255, 255, 0.2);
     border-radius: 10px;
  }
::-webkit-scrollbar-corner {/* 横向滚动条和纵向滚动条相交处尖角 */
     background-color: black;
  }

文本自动换行

overflow-y: auto;//垂直方向自适应
word-wrap:break-word;//文本自动换行

隐藏原标签，使用定位标签lable为其设置样式

元素在主轴（页面）上居中排列

justify-content: center;

设置段落尺寸（最小高度等）

min-height: 100px;//最小高度为100px

转换元素行，块性质

  display: block;//转为块级
  display: inline;//转为内联,行
  display: inline-block;//块and行

移除默认样式

/* 移除默认样式 */
 -webkit-appearance: none;

让标签不可选中

pointer-events: none;

让文本不可选中

-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;

原文地址：https://blog.csdn.net/grd_java/article/details/105456555?ops_request_misc=&request_id=06f15b4d02774e9598f5645ef55394ad&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-26-105456555-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88