11个css高级常见技巧汇总

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

HTML代码

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

设置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聚焦时的样式

input:focus {   
  background-color: red;
}

取消input的边框

input{
  border: none;
  outline: none;
}

效果如下:

设置input 的placeholder的字体样式

2. 单行和多行文本超出省略号

HTML代码

<div class="container">
  <p class="single">
    <span class="c-red">单行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程,
    全面介绍 ECMAScript 6 新引入的语法特性。
  </p>
  <p class="mutiple">
    <span class="c-red">多行溢出:</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程,
    全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处,
    对涉及的语法知识给予详细介绍,并给出大量简洁易懂的示例代码。
  </p>
</div>

CSS代码

/*容器*/
.container {
    width: 300px;
    height: 200px;
    margin: 100px;
    padding: 20px;
    border: 1px solid #eee;
    font-size: 13px;
    color: #555;
}

.c-red {
    color: red;
}

p {
    background-color: rgba(189, 227, 255, 0.28);
    padding: 2px 5px;
}

/*单行*/
.single {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

    /*多行*/
.mutiple {
    display: -webkit-box;
 /*重点,不能用block等其他,将对象作为弹性伸缩盒子模型显示*/
    -webkit-box-orient: vertical;
 /*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
    -webkit-line-clamp: 3;
 /*行数,超出三行隐藏且多余的用省略号表示...*/
    line-clamp: 3;
    word-break: break-all;
    overflow: hidden;
    max-width: 100%;
}

单行和多行文本超出省略号

3. 负边距使用技巧

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

HTML代码

<div class="wrap">
    <div class="item" style="background-color: red;"></div>
    <div class="item" style="background-color: green;"></div>
    <div class="item" style="background-color: yellow;"></div>
    <div class="item" style="background-color: pink;"></div>
    <div class="item" style="background-color: green;"></div>
</div>

CSS代码

* {
    margin: 0;
    padding: 0;
}

.wrap {
    /* 利用负值技巧进行整体移动 */
    margin-left: -6px;
}

.item {
    float: left;
    width: 20%;
    height: 300px;
    border-left: 6px solid #fff;
    box-sizing: border-box;
}

负边距使用技巧负边距使用技巧

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

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

HTML代码

<span>1</span>

CSS代码

span {
    border: 1px solid red;
    position: absolute;
    left: 0;
    right: 0;
   /* 等同于设置  width:100%;display:block */
}

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

HTML代码

<ul>
 <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

CSS代码

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

li+li {
    border-top: 1px solid red;
}

效果如下:

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

6. outline属性的妙用技巧

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

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS代码

* {
    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;
}

效果如下:

outline属性的妙用技巧

outline属性的妙用技巧

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

HTML代码

<p class="scroll-container">
        庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方,她登楼向远处望去,却看不见那通向章台的大路。春已至暮,三月的雨伴随着狂风大作,再是重门将黄昏景色掩闭,也无法留住春意。泪眼汪汪问落花可知道我的心意,落花默默不语,纷乱的,零零落落一点一点飞到秋千外。
</p>

CSS代码

.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;
}

效果如下:

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

相关文章推荐阅读:

纯css美化滚动条样式 -webkit-scrollbar

CSS实现将垂直滚动条放置在左侧方法

8. 纯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;
 }

纯CSS绘制三角形

其他css形状图形绘制方法请看《css优雅的画出形状图形

9. 虚线框绘制技巧

HTML代码

<p class="dotted-line">庭院深深,不知有多深?杨柳依依,飞扬起片片烟雾,一重重帘幕不知有多少层。</p>

CSS代码

.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);
}

效果如下:

虚线框绘制技巧

相关知识推荐阅读《css 蚂蚁行军边框效果

10. 卡券效果制作

HTML代码

<p class="coupon">
 <span>200</span>优惠券
</p>

CSS代码

.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;
}

效果如下:

卡券效果制作

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

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

HTML代码

<h1>
  <a href="#" role="img" class="logo-bd clearfix">淘宝网</a>
</h1>

CSS代码

.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;
}
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 11个css高级常见技巧汇总

发表评论

提供最优质的资源集合

立即查看 了解详情