效果：
上代码：
<template><div><p class="input-box">设置input 的placeholder的字体样式 <input type="text" placeholder="请设置用户名" name="" id="" /></p><p class="triangle-box">纯CSS绘制三角形 <span></span></p><p class="dotted-line">虚线框绘制技巧---我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前</p><p class="card"><span>200</span>优惠券</p><p>隐藏滚动条或更改滚动条样式👇</p><p class="scroll-container">我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前。 你看雪花飘散，芊芊换白观。 白发老人背着孩下山，远观天仙舞欢我今醉酒悠哉。 一别寒山，我何时归来， 我欲迎风在留住几步。 怎舍寒风吹动我痛处， 我说寒山别哭，我带你出。 我敬滴酒带你出， 我欲成冰再也无退路。怎舍寒冰冰冻我心哭， 我说寒山别哭，我带你出， 我画美观带你出。 我醉提酒游寒山，难舍美观； 仙着衣裳抚琴欢，美人奏弦。 你看白雪人间，你看冰川璀璨， 来者恋，如大梦眼前。我欲迎风在留住几步， 怎舍寒风吹动我痛处。 我说寒山别哭，我带你出， 我敬滴酒带你出。 我欲成冰再也无退路， 怎舍寒冰冰冻我心窟。 我说寒山别哭，我带你出， 我画美观带你出。我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前。 你看雪花飘散，芊芊换白观。 白发老人背着孩下山，远观天仙舞欢我今醉酒悠哉。 一别寒山，我何时归来， 我欲迎风在留住几步。 怎舍寒风吹动我痛处， 我说寒山别哭，我带你出。 我敬滴酒带你出， 我欲成冰再也无退路。怎舍寒冰冰冻我心哭， 我说寒山别哭，我带你出， 我画美观带你出。 我醉提酒游寒山，难舍美观； 仙着衣裳抚琴欢，美人奏弦。 你看白雪人间，你看冰川璀璨， 来者恋，如大梦眼前。我欲迎风在留住几步， 怎舍寒风吹动我痛处。 我说寒山别哭，我带你出， 我敬滴酒带你出。 我欲成冰再也无退路， 怎舍寒冰冰冻我心窟。 我说寒山别哭，我带你出， 我画美观带你出。</p><p class="text-el"><span>单行溢出：</span>我醉提酒游寒山，霜华满天； 一吸寒气冷风翻，酒洒河山。 仰望蓝水云烟，翩翩雀落人间， 抬手间，我酒落湿衫前</p><p class="text-els"><span>多行溢出：</span>怎舍寒冰冰冻我心哭， 我说寒山别哭，我带你出， 我画美观带你出。 我醉提酒游寒山，难舍美观； 仙着衣裳抚琴欢，美人奏弦。 你看白雪人间，你看冰川璀璨，来者恋，如大梦眼前。 我欲迎风在留住几步， 怎舍寒风吹动我痛处。 我说寒山别哭，我带你出， 我敬滴酒带你出</p><p>加油.....搬运工</p></div></template><style scoped lang="scss">.text-el {// 单行文本出现省略号width: 500px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: break-all;}.text-els {width: 500px;// 多行文本出现省略号display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/line-clamp: 3;word-break: break-all;overflow: hidden;}p {margin: 50px;}.input-box {input {&::-webkit-input-placeholder {/* Chrome/Opera/Safari */color: red;}&::-moz-placeholder {/* Firefox 19+ */color: red;}&:-ms-input-placeholder {/* IE 10+ */color: red;}&:-moz-placeholder {/* Firefox 18- */color: red;}&:focus {background-color: red;// 去掉输入框的边框border: none;outline: none;}}}.triangle-box {// 正三角span {width: 0;height: 0;display: inline-block;border-style: solid;border-width: 0px 25px 40px 25px;// border: 25px solid red;border-color: transparent transparent red transparent; // 三角形向上 就让除了向下其他地方都变透明}}.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 0.25em, white 0, white 0.75em);}.card {width: 300px;height: 100px;line-height: 100px;margin: 50px auto;text-align: center;position: relative;background: radial-gradient(circle at right bottom, transparent 10px, #ee8290 0) top right / 50% 51px no-repeat,radial-gradient(circle at left bottom, transparent 10px, #ee8290 0) top left / 50% 51px no-repeat,radial-gradient(circle at right top, transparent 10px, #ee8290 0) bottom right / 50% 51px no-repeat,radial-gradient(circle at left top, transparent 10px, #ee8290 0) bottom left / 50% 51px no-repeat;filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));}.card span {display: inline-block;vertical-align: middle;margin-right: 10px;color: rgb(240, 225, 14);font-size: 50px;font-weight: 400;}.scroll-container {width: 1000px;height: 500px;border: 1px solid #ddd;padding: 15px;overflow: auto; /*必须*/// 只单独设置scrollbar 这样可以隐藏 设置宽度 还是 设置背景颜色 都是隐藏&::-webkit-scrollbar {width: 8px;// background: white;}&::-webkit-scrollbar-corner,/* 滚动条角落 */&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track {/*滚动条的轨道*/border-radius: 10px;}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track {/* 滚动条轨道 颜色 */background-color: rgba(4, 9, 248, 0.1);box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);}&::-webkit-scrollbar-thumb {/* 滚动条手柄 颜色 */background-color: #00adb5;}}</style>
文本超出省略号 css三角形 画虚线边框 修改输入框placeholder样式 修改滚动条样式 css实现优惠券
