前端开发技术之CSS高级常见技巧汇总

2022-05-11 01:56:12

设置input的placeholder的字体样式
负边距使用技巧
定位同时设置方位情况
相邻兄弟选择器之常用场景
outline属性的妙用技巧
隐藏滚动条或更改滚动条样式
纯CSS绘制三角形
虚线框绘制技巧
卡券效果制作
隐藏文本的常用两种方法
表格边框合并

1.设置input 的placeholder的字体样式

1)设置input占位符的样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
    color: red;
}
input::-moz-placeholder { /* Firefox 19+ */
    color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
input:-moz-placeholder { /* Firefox 18- */
    color: red;
}

<input type="text" placeholder="请设置用户名">

2)设置input聚焦时的样式

input:focus {
background-color: red;
}

3)取消input的边框

border: none;
outline: none;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS高级常见技巧汇总</title>
  <style type="text/css">
    input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
      color: red;
    }
    input::-moz-placeholder { /* Firefox 19+ */
      color: red;
    }
    input:-ms-input-placeholder { /* IE 10+ */
      color: red;
    }
    input:-moz-placeholder { /* Firefox 18- */
      color: red;
    }
    input:focus {
      background-color: red;
    }
    input{
      border: none;
      outline: none;
    }
  </style>
</head>
<body>
<input type="text" placeholder="请设置用户名">
</body>
</html>

2. 负边距使用技巧

规律: 左为负时，是左移，右为负时，是左拉。上下与左右类似

*{
    margin:0;
    padding:0;
}
.wrap{
    /* 利用负值技巧进行整体移动 */
    margin-left:-6px;
}
.item{
    float:left;
    width: 20%;
    height: 300px;
    border-left:6px solid #fff;
    box-sizing: border-box;
}
<div class="wrap">
    <div class="item" style="red;"></div>
    <div class="item" style="green;"></div>
    <div class="item" style="yellow;"></div>
    <div class="item" style="pink;"></div>
    <div class="item" style="green;"></div>
</div>

3.定位同时设置方位情况

规律: 绝对定位和固定定位时，同时设置 left 和 right 等同于隐式地设置宽度

span{
  border:1px solid red;
  position: absolute;
  left:0;
  right:0;

   /* 等同于设置  width:100%;display:block */
}
<span>1</span>

4. 相邻兄弟选择器之常用场景

ul{
  width: 500px;
   margin:auto;
   list-style: none;
   padding:0;
   border:1px solid red;
   text-align: center;
}
li+li{
   border-top:1px solid red;
}

5. outline属性的妙用技巧

区别: outline不计算大小 border计算大小

* {
    padding: 0;
    margin: 0;
  }

  ul {
    list-style: none;
    width: 600px;
    margin: auto;
  }

  li {
    padding: 10px;
    border: 10px solid pink;
    outline-offset: -10px;
  }
  li+li{
    margin-top:-10px;
  }
  li:hover{
    /* border:10px solid gold; */
    outline:10px solid gold;
  }

6. 隐藏滚动条或更改滚动条样式

.scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   padding: 15px;
   overflow: auto;     /*必须*/
}

.scroll-container::-webkit-scrollbar {
   width: 8px;
   background: white;
}

.scroll-container::-webkit-scrollbar-corner,
   /* 滚动条角落 */
.scroll-container::-webkit-scrollbar-thumb,
.scroll-container::-webkit-scrollbar-track {      /*滚动条的轨道*/
   border-radius: 4px;
}

.scroll-container::-webkit-scrollbar-corner,
.scroll-container::-webkit-scrollbar-track {
   /* 滚动条轨道 */
   background-color: rgba(180, 160, 120, 0.1);
   box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}

.scroll-container::-webkit-scrollbar-thumb {
   /* 滚动条手柄 */
   background-color: #00adb5;
}

<p class="scroll-container">
我欲举杯邀明月，对酒当歌，人生几何人生之路苦短漫长，红尘琐事千般无奈，何人能够看破红尘，何人能够纵横人世，何人能够快意恩仇，何不洒脱的走自我的路，无论坎坷，无论风雨，豪情抒写人生的喜怒哀。
</p>

7. 纯CSS绘制三角形

/* 正三角 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245, 129, 127) transparent;
}

/* 倒三角 */
.down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  rgb(245, 129, 127) transparent transparent transparent;
}
div:last-child {
   margin-top: 1rem;
}

8. 虚线框绘制技巧

.dotted-line {
  width: 800px;
  margin: auto;
  padding: 20px;
  border: 1px dashed transparent;
  background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
}
<p class="dotted-line">庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。</p>

9. 卡券效果制作

.coupon {
width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}

10. 隐藏文本的常用两种方法

text-indent: -9999px; 或者 font-size: 0;

.logo {
width: 190px;
  height: 80px;
  float: left;
  margin-top: 8px
}

.logo h1 {
  position: relative
}

.logo h1 .logo-bd {
  display: block;
  margin-left: 22px;
  padding-top: 58px;
  width: 142px;
  overflow: hidden;
  background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
  text-indent: -9999px;
}

11. 表格边框合并

table{
border-collapse: collapse;
}

了解更多前端培训开发技术知识，关注我，有更多精彩内容与您分享！

前端开发技术之CSS高级常见技巧汇总

码农公寓

相关文章