时间:2023-09-29 21:48:01 | 来源:网站运营
时间:2023-09-29 21:48:01 来源:网站运营
Web前端设计秘籍——30个工作中常用的CSS样式:CSS样式被称为“层叠样式表”,是一种网页制作不可或缺的技术,是用于修饰网页样式,达到设计效果的一种样式语言。.title { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all;}
input::-webkit-input-placeholder { color:skyblue; text-align: center;}input::-ms-input-placeholder { color:skyblue; text-align: center;}input::-moz-placeholder { color:skyblue; text-align: center;}
.box::before { content:""; display: inline-block; height: 100vh; vertical-align: middle; text-align: center;}
.box { background: skyblue; height: 100vh; display: flex; justify-content: center; align-items: center;}
.wrap { margin: 0 auto; width: 800px; text-align: justify; text-justify: distribute-all-lines; /* 兼容IE6-8 */ text-align-last: justify; -moz-text-align-last: justify;}
body,html { -webkit-overflow-scrolling:touch}
07、设置滚动条样式.wrap { margin: 0 auto; width: 300px; height: 200px; overflow: auto;}.wrap::-webkit-scrollbar { /* 整体大小样式 */ width: 10px; height: 10px; }.wrap::-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) 55%, rgba(255,255,255,0.2) 75%, transparent 75%, transparent);}.test::-webkit-scrollbar-track {/* 滚动条的轨道 */ box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #ededed; border-radius: 10px;}
.wrap { margin: 0 auto; width: 300px; height: 200px; overflow: auto; scrollbar-width: none; -ms-overflow-style: none;}.wrap::-webkit-scrollbar {/* 整体大小样式 */ display: none;}
div { width:0; height:0; border-width: 0 40px 40px; border-style: solid; border-color: transparent transparent rgba(0,0,0,0.3);}
CSS样式效果图div { position: relative; width:0; height:0; border-width: 40px 0 40px 40px ; border-style: solid; border-color: transparent black ;}div::after { content: ""; position: absolute; top:-36px; left:-38px; border-width: 36px 0 36px 36px ; border-style: solid; border-color: transparent red ;}
.wrap { margin: 0 auto; width: 600px; text-indent: 2em; letter-spacing: 10px;}
.wrap { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
12、元素占满整个屏幕.mask { width:100%; height: 100vh; background: rgba(0,0,0,0.6); position: fixed; top: 0;}
关键词:中常,样式,工作,设计,秘籍