大家好，我是 漫步，今天来分享一些比较高级复杂的CSS技巧，都是我们平常常用的，或许对你有所帮助。

  • 设置input的placeholder的字体样式

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

  • 负边距使用技巧

  • 定位同时设置方位情况

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

  • outline属性的妙用技巧

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

  • 纯CSS绘制三角形

  • 虚线框绘制技巧

  • 卡券效果制作

  • 隐藏文本的常用两种方法

  • 表格边框合并

1-1. 设置input 的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 type="text" placeholder="请设置用户名">

设置input聚焦时的样式

input:focus {   background-color: red;
}

取消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>

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

// 单行文本出现省略号
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;// 多行文本出现省略号
display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;
<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>
/*容器*/.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%;}

效果1

1-3. 负边距使用技巧

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

*{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="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>

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

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

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

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

ul{width: 500px;margin:auto;list-style: none;padding:0;border:1px solid red;text-align: center;}li+li{border-top:1px solid red;}
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

效果ul

1-6. 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;}
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>

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

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

scrollbar

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

三角形

1-9. 虚线框绘制技巧

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

虚线

1-10. 卡券效果制作

.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;
}
<p class="coupon"><span>200</span>优惠券
</p>

优惠券

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

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;
}
<h1><a href="#" role="img" class="logo-bd clearfix">淘宝网</a>
</h1>

1-12. 表格边框合并

table{border-collapse: collapse;
}
<table border="1"><thead><tr><th>第一列</th><th>第二列</th><th>第三列</th><th>第四列</th></tr></thead><tbody><tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td></tr><tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td></tr><tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td></tr></tbody></table>

合并后

转自：CSDN- 前端一零仙人

https://blog.csdn.net/weixin_41556756/article/details/114196921

- EOF -

推荐阅读  点击标题可跳转

27 个 CSS 案例演示和 DEMO

14种CSS实现水平或垂直居中的技巧

CSS3实现5个常用的网页动画效果

关注下方「前端热榜」，回复 “思维图”

获取公众号所有JS思维图

我是漫步，分享技术，不止前端，下期见~

最后，欢迎加我的微信，拉你进上百人的前端交流群

创作不易，加个点赞、在看 支持一下哦！

十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）...相关推荐

  1. 十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）

    设置input的placeholder的字体样式 单行和多行文本超出省略号 负边距使用技巧 定位同时设置方位情况 相邻兄弟选择器之常用场景 outline属性的妙用技巧 隐藏滚动条或更改滚动条样式 纯 ...

  2. css虚线矩形,css3内部虚线框设计

    第一个使用的是border为虚线,再加上box-shadow来模拟外面的框:第二个使用的:before方法生成一个虚线框,这里注意的是生成的内容定位上下左右各为3px,确定了这个生成内容的大小,另外需 ...

  3. CSS 高级布局技巧

    用 :empty 区分空元素 兼容性:不支持 IE8 Demo 假如我们有以上列表: <div class="item">a</div> <div c ...

  4. Global Mapper常见技巧汇总（常见格式转换，影像拼接，几何纠正....）

    Global Mapper作为一个辅助工具,在工作中的使用频率是很高的,至少在小助手工作中每天都是必不可少的.今天小助手就来汇总下工作中用的比较多而且自我感觉比较实用的几个工具吧. " 卷帘 ...

  5. 自学前端第二十九天 CSS高级之细节技巧

    第二十九天 css高级细节技巧 一.background-color :属性设置元素的背景颜色. 定义和用法 background-color 属性设置元素的背景颜色. 元素背景的范围 backgro ...

  6. CSS高级常用应用技巧汇总

    1.单行和多行文本超出省略号 <div class="container"><p class="single"><span cla ...

  7. 第八十四节，css布局小技巧及font-awesome图标使用

    css布局小技巧及font-awesome图标使用 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{width: 384px;height: 240px;backgrou ...

  8. 【信息系统项目管理师】第二十二章 信息系统安全管理（考点汇总篇）

    [信息系统项目管理师]第二十二章 信息系统安全管理(考点汇总篇) 考点分析与预测 信息安全为高级科目独有的章节,在第三版教材中有66页的内容.需要掌握的知识点非常多,且知识点非常散,在考试中上午一般考 ...

  9. Excel 电子表格运用技巧汇总

    Excel 电子表格运用技巧汇总 Leo @ 2005-4-25 13:53 Excel XP的八则快速输入技巧 如果我们在用Excel XP处理庞大的数据信息时,不注意讲究技巧和方法的话,很可能会花 ...

最新文章

  1. 这位北大CS硕士小老弟，简直是“卷怪”！
  2. 网页制作之JavaScript部分3--事件及事件传输方式（函数调用 练习题 ）重要---持续更新中...
  3. Endian Bitfiled
  4. Java 并发---ConcurrentHashMap
  5. 成年人的样子是什么样子_不只是看样子
  6. [html] html中p标签内为何不能嵌套div标签？
  7. php多维数组交集,求数组差/交集函数-php数组函数（二）
  8. python spark社区_Spark中文python文档
  9. layer 父弹出框上弹出子弹框窗体大小问题
  10. bzoj4771 七彩树
  11. 操作系统之课程设计常用磁盘调度算法的实现，附源码
  12. oracle10g_database安装教程,Oracle Database 10g数据库安装及配置教程
  13. 将英文字符串转换为数字
  14. orientation
  15. 裸设备和Oracle问答20例
  16. 2011年安徽省公务员考试行测真题(3)
  17. Inferior 1 (process xxx) exited with code 0177
  18. 局域网SDN技术硬核内幕 二 云网CP的日常恩爱——硬件VXLAN转发平面
  19. 信用评分卡模型开发中双峰分布原因及解决方案
  20. python人机交互界面设计_[译]学习IPython进行交互式计算和数据可视化（五）

热门文章

  1. 舆情监测专题报告写作内容及格式参考模板
  2. TCPA:肿瘤RPPA蛋白芯片数据中心
  3. Python 上下文管理器和with块 二
  4. Google signin 引发的崩溃(人)
  5. 什么是懒惰的苏珊(Lazy Susan)
  6. FFmpeg解码视频帧为jpg图片保存到本地
  7. YOLOv5检测界面-PyQt5实现
  8. Oracle Exadata X8M： 终结 DIY 数据库系统
  9. 【JVM】垃圾回收机制及算法
  10. DM8:dexpdimp-逻辑导出--逻辑导入