CSS常见技巧汇总

前端 1,033° Views

1.纯CSS绘制三角形

/* 正三角 */
.up-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 25px 40px 25px;
   border-color: transparent transparent rgb(245, 129, 127) transparent;
 }
 
 /* 倒三角 */
 .down-triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 40px 25px 0 25px;
   border-color:  rgb(245, 129, 127) transparent transparent transparent;
 }
 div:last-child {
   margin-top: 1rem;
 }

2.设置input 的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;
}

3.设置input聚焦时的样式

input:focus {   
  background-color: red;
}

4.单行和多行文本超出省略号

// 单行文本出现省略号
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
 
// 多行文本出现省略号
display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;

5.相邻兄弟选择器之常用场景

ul{
  width: 500px;
   margin:auto;
   list-style: none;
   padding:0;
   border:1px solid red;
   text-align: center;
 }
 li+li{
   border-top:1px solid red;
 }

6.隐藏滚动条或更改滚动条样式

<style>
.scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   padding: 15px;
   overflow: auto;     /*必须*/
 }
 
 .scroll-container::-webkit-scrollbar {
   width: 8px;
   background: white;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
   /* 滚动条角落 */
 .scroll-container::-webkit-scrollbar-thumb,
 .scroll-container::-webkit-scrollbar-track {      /*滚动条的轨道*/
   border-radius: 4px;
 }
 
 .scroll-container::-webkit-scrollbar-corner,
 .scroll-container::-webkit-scrollbar-track {
   /* 滚动条轨道 */
   background-color: rgba(180, 160, 120, 0.1);
   box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
 }
 
 .scroll-container::-webkit-scrollbar-thumb {
   /* 滚动条手柄 */
   background-color: #00adb5;
 }
</style>
<p class="scroll-container">
        庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语...
</p>

7.表格常用样式（边框合并等）

table {
	border-collapse: collapse;	/* 边框合并属性 */
	margin: 0 auto;
	text-align: center;
}
table td,
table th {
	border: 1px solid #cad9ea;
	color: #666;
	height: 30px;
}
table thead th {
	background-color: #CCE8EB;
	width: 100px;
}
table tr:nth-child(odd) {
	background: #fff;
}
table tr:nth-child(even) {
	background: #F5FAFA;
}

8. 纯CSS制作显隐菜单

使用checkbox选择框和label按钮可以为显隐菜单提供按钮
选定此按钮会出现伪类checked
利用此机制可以使用纯HTML和CSS相邻选择器制作一些点击效果如点击弹出下拉菜单
可以给label添加背景图标 (把checkbox隐藏)

9.自定义字体

@font-face{
    font-family: '字体名称随便起';
    src: url('../font/字体名称.eot');
    src:url('../font/字体名称.woff') format('woff'),
    url('../font/字体名称.ttf') format('truetype'),
    url('../font/字体名称.svg') format('svg');
}

10.媒体查询

/* 直接引文件 */
<link rel="stylesheet" media="screen and (max-width:1220px)" href="media/max1220.css">
/* 样式 */
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

11.css传参

:root {  /* 任意父元素 */
	--rad-0: 0%;
	--rad-50: 50%;
	--rad-100: 100%;
}
/* 参数字段用--开头，使用var()调用 */
.round {
        /* 子元素 */
	border-radius: var(--rad-50);
}

本文固定连接：https://code.zuifengyun.com/2021/01/1938.html，转载须征得作者授权。

加载中...
加载中...