小杨博客
January 16, 2023

Css 使用技巧

 •  4   • 776 
Table of contents

解决img 5px间距的问题

方案1：设置父元素字体大小为0

.img-container{
	font-size: 0;
}

方案2：将img元素设置为display:block

img {
	display:block;
}

方案3:将img元素设置为vertical-align: bottom

img {
	vertical-align: bottom;
}

方案4：给父元素设置 line-height：5px

.img-container{
	line-height：5px;
}

元素的高度与window的高度相同

修改input placeholder样式

.placehoder-custom:-webkit-input-placeholder {
	color:#babbc1; 
	font-size:12px; 
}

使用:not选择器

image-20220804120554966 
li:not(:last-child){
	border-bottom: 1px solid #ebedf0;
}

使用flex布局将一个元素智能地固定在底部

/* html  */
<div class="container">
  <div class="main">I'm fatfish, 6 years of programming experience, like front-end, writing
    and making friends,looking forward to becoming good friends with you.</div>
  <div class="footer">rule</div>
</div>

/* css */
* {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  /* 关键样式 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  /* 关键样式 */
  flex: 1;
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.footer {
  padding: 15px 0;
  text-align: center;
  color: #ff9a9e;
  font-size: 14px;
}

使用caret-color来修改光标的颜色

caret-color:#ffd476;

image-20220804122428670

删除type="number"末尾的箭头

.no-arrow::-webkit-outer-spin-button, .no-arrow::-webkit-inner-spin-button {
    -webkit-appearance:none;
}

outline:none删除输入状态线

<input type="number" class="no-outline" />
.no-outline {
  outline: none;
}

解决OS滚动条被卡住的问题

绘制三角形

image-20220804141048434 
<div class="box">
  <div class="box-inner">
    <div class="triangle bottom"></div>
    <div class="triangle right"></div>
    <div class="triangle top"></div>
    <div class="triangle left"></div>
  </div>
</div>

.box {
  padding: 15px;
  background-color: #f5f6f9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* Base Style */
  border: solid 10px transparent;
}
/*bottom*/
.triangle.bottom {
  border-top-color: #0097a7;
}
/*top*/
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/*left*/
.triangle.left {
  border-right-color: #00bcd4;
}
/*right*/
.triangle.right {
  border-left-color: #009688;
}

绘制小箭头

image-20220804141316591 
<div class="box">
  <div class="box-inner">
    <div class="arrow bottom"></div>
    <div class="arrow top"></div>
    <div class="arrow right"></div>
    <div class="arrow left"></div>
  </div>
</div>


.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*bottom*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*top*/
.arrow.top {
  transform: rotate(90deg);
}
/*left*/
.arrow.left {
  transform: rotate(180deg);
}
/*right*/
.arrow.right {
  transform: rotate(0deg);
}

图像适配窗口大小

<div class="box">
  <div class="img-container">
    <img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
  </div>
</div>

<div class="box">
  <div class="img-container">
    <img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
  </div>
</div>

<div class="box-vw">
  <div class="img-container">
    <img src="https://cdn-images-1.medium.com/max/1600/0*tuDPftoIhupd-qx-.jpg" alt="">
  </div>
</div>

.box,
.box-vw {
  background-color: #010102;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}

.box:nth-of-type(2) {
  width: 260px;
}
/* vw */
.box-vw .img-container {
  width: 100vw;
  height: 66.620879vw;
  padding-bottom: inherit;
}
/* padding */
.img-container {
  width: 100%;
  height: 0;
  /* Aspect ratio of picture*/
  padding-bottom: 66.620879%;
}

img {
  width: 100%;
}

隐藏滚动条

.box-hide-scrollbar::-webkit-scrollbar {
	dispaly:none;
}

自定义选定的文本样式

image-20220804142144900

.box-custom::selection {
	color: #ffffff;
	background-color: #ff4c9f;
}

不允许选择文本

image-20220804142315819

.box p:last-child {
	user-select: none;
}

单行文本溢出时显示省略号

image-20220804142459809

.one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 375px;
}
/* flex 布局下的文本溢出省略号*/
.lable_title {
    display: flex;
    font-size: 28rpx;
    font-weight: 400;
    color: $textColor;
    text {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

多行文本溢出时显示省略号

image-20220804142620823

.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* set n lines, including 1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

中英文自动换行

      p {
        word-wrap: break-word;
        white-space: normal;
        word-break: break-all;
      }
      /* 不换行 */
      .wrap {
        white-space: nowrap;
      }
      /* 自动换行 */
      .wrap {
        word-wrap: break-word;
        word-break: normal;
      }
      /* 强制换行 */
      .wrap {
        word-break: break-all;
      }

使用"filter::grayscale(1)",使页面处于灰色模式。

image-20220804142838024

body {
	filter: grayscale(1);
}

Table表格边框合并

table,tr,td {
	border: 1px solid #666;
}
table {
	boder-collapse: collapse;
}

CSS实现文本两端对齐

.wrap { 
    text-align: justify; 
    text-justify: distribute-all-lines; //ie6-8 
    text-align-last: justify; //-个块或行的最后一行对齐方式 
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

实现文字竖向排版

/*单列展示时*/
.wrap{
    width: 25px; 
    line-height: 18px;
    height: auto; 
    font-size: 12px;
    padding: 8px 5px; 
    word-wrap: break-word;/*英文的时候需要加上这句,自动换行*/ 
}
/*多列展示时*/
.wrap{
    height: 210px; 
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr; //从左向右
    writing-mode: tb-lr; //IE从左向右 
    //writing-mode: vertical-rl; 从右向左 
    //writing-mode: tb-rl; 从右向左
}

页面动画出现闪烁问题

字母大小写转换

p{itext-transform: uppercase;} //将所有字母变成大写字母
p{itext-transform: lowercase;} // 将所有字母变成小写字母 
p{text-transform: capitalize;} // 首字母大写 
p{font-variant: small-caps;}//将字体变成小型的大写字母

将一个容器设为透明

.wrap { 
    filter:alpha (opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; opacity: 0.5;
}

消除transition闪屏

.wrap{
    -webkit-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden;
    -webkit-perspective:1000;
}

识别字符串里的’\n’并换行

body {
	white-space: pre-line;
}

移除a标签被点链接的边框

a{
	outline:none;//或者out1ine: 0;
	text-decoration:none;//取消默认下划线
}

修改input输入框中光标的颜色不改变字体的颜色

input{
    color:#fff;
	caret-color: red;
}

全屏背景图片的实现

.swper{
    background-image：url(./img/bg-jpg);
    width：100%;
    height：100%;//父级高不为100%请使用100vh 
    zoom：1;
    background-color：#fff;
    background-repeat：no-repeat;
    background-size：cover;
    -webkit-background-size：cover;
    -o-background-size：cover;
    background-position：center 0;
}

解决1px边框变粗问题

.dom{
    height:1px;
    background:#dbdbdb;
    transform:scaleY(0.5);
}

图片自适应object-fit

css渐变色文本在ios Safari上不可见的问题

// 渐变色文本
.gradient-effect {
  background: linear-gradient(240.86deg, #ff8329 0%, #ff007a 66.41%);
  -webkit-text-fill-color: transparent;
  width: max-content;
  background-clip: text;
  -webkit-background-clip: text;
}

.mine-box-title {
  font-family: Poppins;
  font-style: normal;
  font-weight: bold;
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.01em;
}

腾讯云COS设置

SecretId： AKIDyiCPM8h02pNhmeNsAD0bw3A1by94j6HD

SecretKey：nKaHF0VvACzXopeDVZNvGSaYO3ZqshGY

APPID：1302819971

Bucket：image-1302819971

设定存储区域：ap-guangzhou

设定存储路径：obsImage

Follow me

I work on front-end development work