百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2024-12-25 16:47 61 浏览

为大家精心准备了工作中常用的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>

相关推荐

3D边框效果绝了Jetpack Compose也太会玩了吧

在JetpackCompose中创建惊艳的3D边框效果大家好！今天我要分享一个超酷的技巧——如何在JetpackCompose中创建3D边框效果。这种效果可以应用于任何视图和任何形状...

“雨”你同行，他们在岗位上为您守护……

7月10日京津冀地区迎来降雨天气京铁人以“降雨预警”为令迎风而上逆水而行全力守护铁路运输安全雨帘下的“摆渡人”北京站、石家庄站及时铺设防滑垫，检查排水设施，确保旅客行走通道安全。北京北站加密站台巡视...

战士实用小福利!巧用宏命令让血条更直观

很多战士朋友经常被怒气和血条所困扰，如何及时的进行规避开启防御技能？如何更好的利用怒气打出伤害？成为了众多战士的首要问题。现在即使在没有插件的支持下我们也可以实现这样的功能，巧用宏命令就可以让怒气和血...

python操作word 添加导航栏，导航栏在左边显示

点赞标记，明天就能用上这几个技巧！要实现Python生成Word文档并显示左侧导航栏（即导航窗格），需通过标题样式标记文档结构+修改文档视图设置两步完成。以下是详细且经过验证的解决方案，基于pytho...

田渊栋等原班人马作:AI生成长篇故事，数千字长文也能连贯、有趣

机器之心报道编辑：小舟、陈萍以后，写故事这脑力活可以交给AI了。前段时间，模仿人类写作过程的语言模型Re^3发布，该模型不需要微调大模型，而是通过设计prompt来生成一致性强的故事。现在...

VBA常用代码_1、文本格式整理

本人财务岗位，非专业编程人员，请勿以专业看待哈，能用无BUG即可！均是我在工作中常用的补充功能，且具有通用性的功能。基于实用性而编写。不见理论，只需要你会复制粘贴就行。看完第一篇文章，结合之后更新的内...

行业首选的文档管理工具Aspose.Words新版本v16.3.0发布

Aspose.Words是一款先进的文档处理控件，在不使用MicrosoftWords的情况下，它可以使用户在各个应用程序中执行各种文档处理任务，其中包括文档的生成、修改、渲染、打印，文档格式转换和...

作为前端工程师必须懂得的33个CSS核心概念

你真的懂CSS吗？层叠样式表（CSS）是网页设计的支柱，能将单调的HTML转变为视觉惊艳的交互界面。要精通CSS，必须理解从基础选择器到动画、响应式设计等高级技巧在内的核心概念。无论你是初学者还是资深...

全力做好节假日期间服务保障工作

为保障五一期间ETC运营工作正常有序开展，甘肃省高速公路ETC管理服务中心全力以赴、恪尽职守，使各项工作有备无患。一是要求中心全体职工牢固树立安全发展观念，时刻紧绷“安全弦”，夯实安全生产基础，落实安...

Manila&#39;s hyping up of illegal &#39;arbitral award&#39; nothing but a damp squib

Manila'shypingupofillegal'arbitralaward'nothingbutadampsquib:ChinaDailyeditorial-Opi...

QLabel 文字两端对齐解决方案

在Qt开发中，实现QLabel文字两端对齐是一个常见需求。本文将介绍多种在Qt中实现QLabel文字两端对齐的方法及其原理。Qt本身具备文字两端对齐的支持，但需要同时使用Qt::AlignJ...

tkinter中的一些自定义控件，你知道几个呢?

用tkinter图形库编写过界面的朋友都知道，tkinter中拥有的图形控件很少，ttk中虽然新增了一些，但是这也不足以满足我们的使用，因为我们在编写图形界面的时候会用到各种各样的控件，有些是tkin...

一个人的婚礼:她送给自己的新婚礼物是遗体捐献书

style="text-indent:2em;">1月20日，在重庆武隆区医院的病房里，爱心人士为21岁的杨春燕在医院举办了一场没有新郎的婚礼，圆了春燕穿婚纱、走红毯的心愿，仪式后春燕签署了遗体...

毕业论文小技巧:word排版之章节自动化编号

设置大纲多级列表目的是方便增删章节时实现章节标号的自动编号，并且实现论文图表公式编号按照章节顺序自动编号。准备工作：假设前面已经定义好章节标题样式分别为标题一论文章标题、论文节标题、论文小节标题、论文...

伊朗呼吁土耳其立即终止对叙军事行动

style="text-indent:2em;">新华社德黑兰1月21日电（记者马骁穆东）伊朗外交部21日发表声明说，希望土耳其立即终止在叙利亚阿夫林发起的军事行动，避免叙北部危机进一步恶化。...

一周热门
最近发表
标签列表