【CSS】947- 十几个 CSS 高级技巧汇总
2024-05-19 11:42:06
来自：CSDN ，作者：前端一零仙人
链接：https://blog.csdn.net/weixin_41556756/article/details/114196921
「列举一下效果」
设置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">庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层
「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>
合并后
1. JavaScript 重温系列（22篇全）
2. ECMAScript 重温系列（10篇全）
3. JavaScript设计模式 重温系列（9篇全）
4. 正则 / 框架 / 算法等 重温系列（16篇全）
5. Webpack4 入门（上）|| Webpack4 入门（下）
6. MobX 入门（上） || MobX 入门（下）
7. 120+篇原创系列汇总
回复“加群”与大佬们一起交流学习~
点击“阅读原文”查看 120+ 篇原创文章
【CSS】947- 十几个 CSS 高级技巧汇总相关推荐
- 【web前端(二十四)】CSS详述
CSS的发展历程 从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制.最初的HTML只包含很少的显示属性. 随着HTML的成长,为了满足页面设计者的 ...
- css教程–十步学会用css建站(全)
css教程–十步学会用css建站(全) 转载于:https://www.cnblogs.com/reommmm/articles/1195548.html
- SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
- 猿人学题库十九题——css加密-雪碧图/数据干扰等——地毯式采坑学习
猿人学题库十四题--css加密-雪碧图/数据干扰等 1. 首先 进入 浏览器的开发者工具, 打开就是 俩个无线debugg,正常的操作过掉 1. 找到 debugg 对应的行数,右击选择 neve ...
- CSS入门（网页皮肉）——知识汇总①
CSS知识汇总① 选择器 元素选择器: <style type="text/css">h1{color: (字体颜色);background-color: (背景颜色) ...
- 前端 HTML/CSS （十五）
目录 前端 HTML/CSS (十五) 动画 简单的实现 设置多个动画 延迟播放 动画的迭代次数 设置动画的播放方向 animation-timing-function,改变内部的时序 关键帧动画 响 ...
- CSS篇十——（3）
目录 一.CSS的背景 5. 背景图像固定(背景附着) 5.1 使用方式 6. 背景属性复合写法 6.1 使用方式 7. 背景色半透明 7.1 使用方式 8. 背景总结 一.CSS的背景 CSS设置背 ...
- 对浏览器css兼容性的学习理解及问题解决汇总
一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...
- css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
最新文章
- script标签的defer属性
- CSDN-markdown编辑器使用方法
- 在阿里、腾讯、美团工作有什么区别？
- 帧内16*16模式的宏块数据传输顺序
- 弹出模态窗口，关闭并刷新页面
- winform登录时，在密码框按下回车，直接登陆
- 从零开始学习python | 实例讲解如何制作Python模式程序
- C++11标准库 - array 1
- job用法 Java_Web App使用Quartz实现java schedule job
- python如何爬取图片到指定文件夹论文_基于Python的图片爬虫程序设计
- C语言有好多7,[c语言]有1到100个数，现在从中提取7、和个位或十位上有7的数、以及7的倍数，然后输出。...
- 数据库试题及答案 两套
- mysql语句转换为oracle_MyBatis项目实战 快速将MySQL转换成Oracle语句
- 三阶魔方6步过程总结
- 从辉煌走向消亡(上)——小型机之王DEC公司
- 【机器学习基础】泛化能力、过拟合、欠拟合、不收敛、奥卡姆剃刀原则
- 缓慢的 HTTP 的拒绝服务攻击
- canopen服务器协议,CANopen协议详情讲解.docx
- POI设置Excel下拉列表（数据有效性验证）
- ssm校园社团平台毕业设计源码251554