关键词：
大家好，我是 漫步，今天来分享一些比较高级复杂的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-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>
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>
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 -
推荐阅读 点击标题可跳转
关注下方「前端热榜」，回复 “思维图”
获取公众号所有JS思维图
我是漫步，分享技术，不止前端，下期见~
最后，欢迎加我的微信，拉你进上百人的前端交流群
创作不易，加个点赞、在看 支持一下哦！
20个css高级样式技巧汇总(代码片段)
...越来越懒，没错，我就是想让你变懒。下面是我收集的CSS高级技巧，希望你懒出境界。 1.黑白图像这段代码会让你的彩色照片显示为黑白照片，是不是很酷？1img.desaturate2filter:grayscale(100%);3-webkit-filter:grayscale(100%);4-moz-filter:gray... 查看详情
2017年总结的前端文章——css高级技巧汇总
1.页面顶部阴影body:before{content:"";position:fixed;top:-10px;left:0;width:100%;height:10px;box-shadow:0px0px10pxrgba(0,0,0,.8);z-index:100;}2.给body添加行高你不需要分别添加line-height到每个p,h标记等。只要添加到body即可：body{line-hei 查看详情
前端基础-css高级技巧(代码片段)
css高级技巧一.精灵图1.为什么需要精灵图2.精灵图（sprites）的使用二.字体图标1.优点（了解）2.字体图标的下载3.适用场景4.CSS三角三.CSS用户界面样式1.鼠标样式2.取消表单轮廓和防止拖拽文本域四.vertical-align属性... 查看详情
css高级技巧——精灵图，字体图标，三角形等(代码片段)
欢迎大家去博客冰山一树Sankey，浏览效果更好。直接右上角搜索该标题即可博客园主页：博客园主页-冰山一树SankeyCSDN主页：CSDN主页-冰山一树Sankey前端学习：学习地址：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css... 查看详情
css高级技巧(代码片段)
...的使用2.5字体图标的追加2.6字体图标的加载原理3.CSS制作三角形4.CSS用户界面样式4.1鼠标样式cursor4.2轮廓线outline5.vertical-align属性应用 查看详情
css高级技巧，包括精灵图字体图标及常见布局技巧
今天主要学习了CSS高级技巧，重点掌握精灵图、字体图标的使用，单行溢出显示省略号和一些常用的布局技巧！今日框架：今日重点：一、精灵图：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度1）精灵图... 查看详情
excel表格9个操作技巧汇总
... 2.插入和删除单元格 Excel表格是经常变动的，最常见的是增加或删减表行。在某个单元格上右击，选择“插入”，然后在打开的插入对话框中，可以选择插入单元格，还是插入整行或整列。还有一个更快捷的方法，... 查看详情
我脑中飘来飘去的css魔幻属性
最近看到一篇20个CSS高级技巧汇总的汇总，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。在写这一篇文章之前，自己还写过一篇：我所不注意的那些CSS冷知识，但却阻... 查看详情
css高级技巧背景和边框(代码片段)
box-shadowbox-shadow属性支持多个阴影，用逗号分隔使用inset时，需要同时增加相应的内边距边框内圆角的实现可以用该属性配合outline来实现，因为box-shadow时贴着圆角的，而outline显示为直角，此方案可能会在以后的提案中不可行outli... 查看详情
纯css气泡框实现方法探究
...形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期... 查看详情
android开发中常见的优惠券样式实现和需要注意的细节(代码片段)
效果图主要是中间的两个半圆和虚线的实现，其他都比较简单。但是其中也会涉及到一些细节性的东西，后面讲。item布局整体分为三部分：左边、中间、右边，即以虚线为分割。<?xmlversion="1.0"encoding=... 查看详情
纯css气泡框实现方法探究
...形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期... 查看详情
前端必会的html+css常用技巧之虚线的特殊实现方式(代码片段)
前端必会的HTML+CSS常用技巧之虚线的特殊实现方式利用边框border属性利用background的linear-gradient属性上下左右矩形利用边框border属性这个属性比较简单<divclass="dashed">利用边框borderdashed属性实现虚线</div><divcla... 查看详情
vue学习第十天css高级技巧----css用户界面样式/vertical-align属性应用/溢出文字用省略号显示/常见布局技巧**css初始化的原因**
用户界面样式 1）鼠标样式cursor licursor:pointer; 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 2、轮廓线outline 给表单添加outline：0；或者ou... 查看详情
移动端app自动化测试超全基础汇总
...别要求二.真实面试案例1.一个输入框的面试题（有人拿到高级岗位，有人连初级都没拿到，为什么）三.自我分析1.积累的知识决定了初入社会的岗位 2.什么是好的简历 3.需要掌握的基本知识四.技术基础知识1.常见测试理... 查看详情
用css绘制简单图形
...1个元素和CSS规则绘制各种常见的图形：从简单的矩形、三角形到复杂的月亮、放大镜甚至是太极图。 这种绘图方式主要用到了两类技巧：一是使用伪元素，二是设置图形的边框。特别是边框的使用，非常巧妙。从这些例子... 查看详情
按最常见的值汇总数据框列
】按最常见的值汇总数据框列【英文标题】：summarizedataframecolumnsbythemostcommonvalues【发布时间】：2021-01-0411:47:56【问题描述】：我有一个如下所示的数据框：source_ipdestination_ipmalware_tagransomware_tagbrutefore_tagsource_bytesdestination_byteslabel... 查看详情
[汇]ios高级调试汇总
1、po：printobject的缩写，表示显示对象的文本描述，如果对象不存在则打印nil。简单的打印一个对象我们就不说了，我们来说说特殊的应用场景吧！应用场景：你想知道一个视图包含了哪些子视图。当然你可以循环打印子视图，... 查看详情