^

liuyonghu.com

Stay hungry,Stay foolish,Stay young

刘勇虎的官方网站

网站内容包含大前端、服务器开发、Python开发、iOS开发、Android开发、网站维护等技术文章。专注于分享技术经验，职业心得体会，IT优秀文章与教程创作。

常用css样式处理方案

居中

(1).利用div与line-height使文本居中.
{
  height: 44px;
  line-height: 44px;
}
(2).标签居中

{
  display:flex;
  align-items: center;
  flex-direction:column;
  justify-content:center;
}

省略号

p {
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   }
  1. 伪元素中的伪类使用
a:hover::after{  

}

  1. input中 maxlength 的使用，type=number的时候maxlength不生效,应使用type=text

  2. input占位字体颜色设置

::-webkit-input-placeholder {
    color: #D5C7FF;
}

::-ms-input-placeholder {
    color: #D5C7FF;
}

css选择第N个类的标签

htm代码

  <body>
    <img class="crcleLine" src="img/线圈@3x.png"/>
    <img class="crcleLine" src="img/线圈@3x.png"/>
  </body>

css代码 


img.crcleLine {
    width: 8px;
    height: 75px;
    position: absolute;
}


body>img:nth-of-type(1) {
    left: 36px;
    top: 945px;
}

body>img:nth-of-type(2) {
    right: 36px;
    top: 945px;
}

或


img.crcleLine {
    width: 8px;
    height: 75px;
    position: absolute;
}

img.crcleLine:nth-of-type(1) {
    left: 36px;
    top: 945px;
}


img.crcleLine:nth-of-type(2) {
    right: 36px;
    top: 945px;
}

消除锯齿

{
    -webkit-font-smoothing: antialiased;
}

毛玻璃

#lgbox {
  position: absolute;
  top: calc(50% - 320px);
  /* top: 50%;
  transform: translateY(-50%); 有变换的情况下会使伪元素定位(大小)失效*/
  right: 80px;
  z-index: 10;
  width: 500px;
  height: 640px;
  padding: 51px 60px 70px 60px;
  background-color: transparent;
  overflow: hidden;
}

#lgbox::before {
  position: absolute;
  display: block;
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  content: '';
  background-image: url('../../assets/images/login/bg.jpg');
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  filter: blur(10px);
  margin: -30px;
}
1.本站所有文章除特殊声明外均为原创，未经允许禁止转载!
2.站内文章如有侵权异议，请与我联系，我将在确实后处理！
换个声音
停止播放