CSS高级常用应用技巧汇总

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

<div class="container"><p class="single"><span class="c-red">单行溢出：</span>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契;懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好;有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。</p><p class="mutiple"><span class="c-red">多行溢出：</span>静静的心里，都有一道最美丽的风景。尽管世事繁杂，此心依然，情怀依然;尽管颠簸流离，脚步依然，追求依然;尽管岁月沧桑，世界依然，生命依然。守住最美风景，成为一种风度，宁静而致远;守住最美风景，成为一种境界，悠然而豁达;守住最美风景，成为一种睿智，淡定而从容。带着前世的印记，心怀纯净，身披霞带，踏一水清盈，今生，寻美好而来。</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%;}

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

<p class="scroll-container">
花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契;懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好;有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。
静静的心里，都有一道最美丽的风景。尽管世事繁杂，此心依然，情怀依然;尽管颠簸流离，脚步依然，追求依然;尽管岁月沧桑，世界依然，生命依然。守住最美风景，成为一种风度，宁静而致远;守住最美风景，成为一种境界，悠然而豁达;守住最美风景，成为一种睿智，淡定而从容。带着前世的印记，心怀纯净，身披霞带，踏一水清盈，今生，寻美好而来。
</p>

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

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

4.虚线框

<p class="dotted-line">花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契;懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能如诗如画。人心，远近相安，时光，浓淡相宜。有些风景要远观，才能美好;有些人情要淡然，才会久远，人生平淡更持久，留白方能生远，莲养心中，随遇而安，生命的最美不过是懂得的距离。
静静的心里，都有一道最美丽的风景。尽管世事繁杂，此心依然，情怀依然;尽管颠簸流离，脚步依然，追求依然;尽管岁月沧桑，世界依然，生命依然。守住最美风景，成为一种风度，宁静而致远;守住最美风景，成为一种境界，悠然而豁达;守住最美风景，成为一种睿智，淡定而从容。带着前世的印记，心怀纯净，身披霞带，踏一水清盈，今生，寻美好而来。</p>

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

5.卡券效果制作

<p class="coupon"><span>100元</span>通用优惠券
</p>

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

CSS高级常用应用技巧汇总相关推荐

RISC-V IDE MRS使用笔记(七) ：常用开发技巧汇总
RISC-V IDE MRS使用笔记(七) :常用开发技巧汇总 Q1: MRS调试时如何查看外设寄存器内容? A1: 在调试配置界面添加相应的.svd文件. Q2: MRS如何调用数学库? A2: # ...
自学前端第二十九天 CSS高级之细节技巧
第二十九天 css高级细节技巧一.background-color :属性设置元素的背景颜色. 定义和用法 background-color 属性设置元素的背景颜色. 元素背景的范围 backgro ...
Linux内核基础篇——常用调试技巧汇总
文章目录 printk 动态输出 BUG()和BUG_ON() dump_stack() devmem printk printk共有8个等级,从0-7,等级依次降低. 打印等级可以通过修改/proc ...
python工作技巧_Python常用小技巧汇总
作者:Zarten 简介: 互联网一线工作者,尊重原创并欢迎评论留言指出不足之处,也希望多些关注和点赞是给作者最好的鼓励 ! 概述在做python开发中,可能经常会用到一些小的技巧,但有时会忘记,不 ...
arcgis 圈选获取图层下点位_ArcGIS中62个常用应用技巧汇总【必须收藏】
一.计算面积 ( 可以帮我们计算小班面积 ) 添加 AREA 字段,然后右键点击字段列,然后点击 CALCULATE VALUES; ---> 选择 ADVANCED -->把下面的代码 ...
python常用函数技巧汇总
python有许多实用函数,合理实用可以大幅精简代码.本篇博文旨在记录一些常用的操作技巧,以便重复使用时快速查阅,会持续进行更新. whl文件下载地址 Windows:https://www.lfd. ...
php css布局技巧,最全的CSS开发常用技巧
css(层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各 ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）...
大家好,我是漫步,今天来分享一些比较高级复杂的CSS技巧,都是我们平常常用的,或许对你有所帮助. 设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时 ...
十几个CSS高级常见技巧汇总（虚线框、三角形、优惠券卡券、滚动条、多行溢出...）
设置input的placeholder的字体样式单行和多行文本超出省略号负边距使用技巧定位同时设置方位情况相邻兄弟选择器之常用场景 outline属性的妙用技巧隐藏滚动条或更改滚动条样式纯 ...

CSS高级常用应用技巧汇总

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

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

3.纯CSS绘制三角形

4.虚线框

5.卡券效果制作

CSS高级常用应用技巧汇总相关推荐

最新文章

热门文章