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

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

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

HTML文本框样式

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

废话不多说先上图:

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）