百度360必应搜狗淘宝本站头条
filter函数excel用不了新代系统编程教学软件培训影视网站免费源码最新版网站留言板代码大全
当前位置：网站首页 > 文章教程 > 正文

工作中常用且容易遗忘的 CSS 样式清单整理(一)

yund56 2025-05-23 22:20 8 浏览

为大家精心准备了工作中常用的CSS样式，都是自己工作中常用到的记录发，分享给大家，如果觉得可以希望点赞关注和评论。

废话不多说先上图:




最后把源码奉献给大家

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
	</head>
	<style>
		/* 文字超出部分显示省略号 */
		#el-p-one {
			width: 260px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		#el-p-two {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}


		/*  文字阴影*/
		h1 {
			text-shadow: 5px 5px 5px #FF0000;
		}

		/* 设置placeholder的字体样式 */
		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;
		}

		/* 解决IOS页面滑动卡顿 */

		body,
		html {
			-webkit-overflow-scrolling: touch;
		}

		/*设置滚动条样式 */
		#box,
		#box-two {
			margin-top: 10px;
			width: 150px;
			height: 150px;
			border: 1px solid red;
			overflow: scroll;
		}

		#box::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 10px;
			/*高宽分别对应横竖滚动条的尺寸*/
			height: 1px;
		}

		#box::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 10px;
			background-color: skyblue;
			background-image: -webkit-linear-gradient(45deg,
					rgba(255, 255, 255, 0.2) 25%,
					transparent 25%,
					transparent 50%,
					rgba(255, 255, 255, 0.2) 50%,
					rgba(255, 255, 255, 0.2) 75%,
					transparent 75%,
					transparent);
		}

		#box::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: #ededed;
			border-radius: 10px;
		}


		/* 实现隐藏滚动条同时又可以滚动 */
		#box-two::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}

		#box-two {
			scrollbar-width: none;
			/* firefox */
			-ms-overflow-style: none;
			/* IE 10+ */
			overflow-x: hidden;
			overflow-y: auto;
		}

		/* css 绘制三角形 */
		#box-three {
			width: 0;
			height: 0;
			border-width: 0 40px 40px;
			border-style: solid;
			border-color: transparent transparent red;
		}

		/* 实现带边框的三角形 */
		#box-four {
			position: relative;
			width: 0;
			height: 0;
			border-width: 0 40px 40px;
			border-style: solid;
			border-color: transparent transparent blue;
		}

		#box-four:after {
			content: "";
			position: absolute;
			top: 1px;
			left: -38px;
			border-width: 0 38px 38px;
			border-style: solid;
			border-color: transparent transparent yellow;
		}

		.wrap {
			width: 100px;
			text-align: justify;
			text-justify: distribute-all-lines;
			text-align-last: justify;
			-moz-text-align-last: justify;
			-webkit-text-align-last: justify;
		}
	</style>

	<body style="width: 300px;">
		<h6>1.文字超出部分显示省略号 </h6>
		<p id="el-p-one">测试文字超出部分显示省略号，文字超出部分显示省略号，文字超出部分显示省略号，文字超出部分显示省略号</p>

		<p id="el-p-two">测试多行文本溢出显示省略号，多行文本溢出显示省略号,多行文本溢出显示省略号,多行文本溢出显示省略号,多行文本溢出显示省略号</p>
		<hr />
		<h6>2.文字阴影 </h6>
		<h1>text-shadow 为网页字体添加阴影，</h1>
		<hr />
		<h6>3.设置placeholder的字体样式 </h6>
		<input value="" placeholder="设置placeholder的字体样式" />
		<hr />
		<h6>4.设置滚动条样式 </h6>
		<div id="box">
			条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符

			常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案

			条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息

			因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用
			条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符

			常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案

			条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息

			因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用
		</div>
		<hr />
		<h6>5.实现隐藏滚动条同时又可以滚动 </h6>
		<div id="box-two">
			条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符
			常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案
			条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息
			因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用
			条形码(barcode)是将宽度不等的多个黑条和空白，按照一定的编码规则排列，用以表达一组信息的图形标识符
			常见的条形码是由反射率相差很大的黑条（简称条）和白条（简称空）排成的平行线图案
			条形码可以标出物品的生产国、制造厂家、商品名称、生产日期、图书分类号、邮件起止地点、类别、日期等许多信息
			因而在商品流通、图书管理、邮政管理、银行系统等许多领域都得到广泛的应用

		</div>

		<hr />
		<h6>6.css 绘制三角形 </h6>
		<div id="box-three">

		</div>
		<hr />
		<h6>7.css 实现带边框的三角形： </h6>
		<div id="box-four">

		</div>
		<hr />
		<h6>8.CSS实现文本两端对齐： </h6>
		<div class="wrap">
			文本两端对齐
		</div>
		<hr />
		<div class="wrap">
			实现文本
		</div>
	</body>
</html>

相关推荐

没有获得Windows 10 20H2升级通知，怎样直接升级

微软公司已经正式发布Windows1020H2操作系统，在正常情况下，微软只会首先推送到少量电脑，然后一边推送一边采集遥测数据。收集遥测数据可以确定哪些电脑可以更新，哪些电脑在更新后可能会失败，微...

不想让人随便卸载你安装的程序，用这四招，他将无计可施

Windows10不提供设置删除应用程序限制的功能，有几种间接方法可以防止用户删除操作系统中的程序和游戏。一、WindowsInstaller服务使用Windows工具，可以部分限制用户的权限。如...

一文看懂苹果全球开发者大会 五大系统全面升级

来源：环球网【环球网智能报道记者张阳】北京时间6月23日凌晨1点，苹果全球开发者大会（WWDC2020）如期举行，还是那个熟悉的乔布斯剧院，依旧是高水准的视频展示，但是这届WWDC，却是苹果历史...

无需等待微软分批推送，23H2可借助注册表快速获取Win11 24H2更新

IT之家10月15日消息，Windows1124H2正在分批推送，但由于存在多种Bug，微软已经开始放缓其推送节奏。WindowsLatest发现，Windows1123H2...

办公小技巧:剑走偏锋 PPT中打造动态图表

年底到了少不了又要制作各种总结报表，为了让自己的报表与众不同，我们可以借助PowerPoint动画组件+报表的方式，打造出更为出彩的动态图表。下面以PowerPoint2016为例，介绍如何使用三维...

文档表格 版本差异何在

在办公过程中，对文档或表格的修改是司空见惯的事。那么，一份文档做了内容改动，如何知道差异在哪里？一份表格改动部分数据，如何知道哪些有所变动？不要说审阅和修订功能，因为不是所有人都会用这些功能来标注的，...

Excel VBA自制日历组件16色可选 完美替代VBA日期控件

本日期组件可跟随单元格跟随窗体中ActiveX文本框组合框控件16种配色可选私信回复880日历可体验效果使用说明1打开自己需要应用日历面板的Excel表，注意必须是启用VBA的格式2在...

如何从交互角度读懂产品需求文档

作为设计师，理解产品经理提供的需求文档是交互设计工作的重要前提与起点，然而对于很多设计师来说，需求文档内容通常非常复杂，设计师们需要花费大量时间去消化、理解和归纳。本文作者结合公司示例，分析设计师如何...

植入让文档变得更强大

有效地利用文档置入技术，会让我们的常用文档功能变得更加强大，实现更加高效或有趣的应用。1.写字板文档嵌入其他文档有时，我们要组织一个大型的文档，但是这些文档的内容可能来自于不同种类的文档编辑器，比如...

Office 2016滚动文本框 顺手就来

【电脑报在线】如果一页PPT内容较多无法在完全显示，就需要用到滚动文本框，在PPT2016中借助控件即可快速制作滚动文本框。在“告诉我你想要做什么”输入“文本框控件”，在搜索结果点击“文本框（Acti...

Axure的多状态复选树

本文将详细介绍如何在Axure中实现一种增强型的多状态复选树组件，它不仅支持全选、半选和未选等状态，还具备动态加载、关键字筛选等高级功能。多状态复选树（Multi-StateCheckboxTre...

办公小技巧:PPT中控件图表巧联动

在利用PPT进行图表演示时，操作者有可能要与图表进行交互联动，比如通过输入数据来预测产品的生产情况等，这时就需要用到“开发工具”中的控件了。几个控件配合几句VBA代码，就可以轻松实现上述交互联动效果（...

用好插件——找回火狐的旧功能

现在的软件，特别是浏览器类软件，更新换代速度都很快，而且无论是外观界面还是系统组件都会有较大的变化，这样会让很多朋友无所适从。以大家常用的火狐浏览器为例，它就已经升级到了最新的35版，而且在新版中对很...

重新认识控件(二)

图片和文字，都是一种数据形式。我平时对文本框的录入，报错和提交的设计比较多。最近涉及到图片控件的设计，细细琢磨一下，这玩意还有一些平时没太注意的细节点，感觉对于其他控件的设计有指导意义，特此总结一下传...

JSA宏教程——在文档中添加复合框控件

上一期，我们初步认识了控件Control，本节我们将继续控件的相关内容。这几期我们将逐一介绍相关控制。本节先介绍复合框（也叫组合框）Combobox。复合框的作用复合框就是一个下拉选项框，一次显示一个...

一周热门
最近发表
标签列表
蜀ICP备2024111239号-27