[转载] 几个CSS开发中用到的高级技巧

大杯美式不加糖

已于 2022-09-29 16:03:06 修改

阅读量118

点赞数

分类专栏： CSS 文章标签： css css3

于 2021-06-29 14:39:16 首次发布

原文链接：https://blog.youkuaiyun.com/weixin_41556756/article/details/114196921

版权

CSS 专栏收录该内容

7 篇文章

订阅专栏

设置input的样式

设置input占位符的样式

/*CSS代码*/
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;
}

<!--HTML代码-->
<input type="text" placeholder="请输入一些内容" />

效果如下：
在这里插入图片描述

设置input聚焦时的样式

/*CSS代码*/
input:focus {
	background-color: red;
}

<!--HTML代码-->
<input type="text" placeholder="请输入一些内容" />

效果如下：
在这里插入图片描述

取消input的边框

/*CSS代码*/
input {
	border: none;
	outline: none;
}

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

单行文本出现省略号

/*CSS部分重点*/
width: 300px;
overflow: hidden;
text-overflow: ellipsis; /*超出部分用省略号表示*/
white-space: nowrap; /*不换行*/
word-break: break-all;

<!--HTML代码-->
<div class="container">
    <p class="single">
      <span class="c-red">单行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。
    </p>
</div>

/*容器CSS代码*/
.container {
	width: 300px;
    height: 200px;
    margin: 100px;
    padding: 20px;
    border: 1px solid #eee;
    font-size: 13px;
    color: #555;
}
.c-red {
    color: red;
}
p {
    background-color: rgba(189, 227, 255, 0.28);
    padding: 2px 5px;
}
.single {
	/*这里写上述单行换行实现部分的样式*/
}

效果如下：
在这里插入图片描述

多行文本出现省略号

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

<!--HTML代码-->
<div class="container">
    <p class="mutiple">
      <span class="c-red">多行溢出：</span>《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。本书覆盖 ES6 与上一个版本 ES5 的所有不同之处，对涉及的语法知识给予详细介绍，并给出大量简洁易懂的示例代码。
    </p>
</div>

/*容器CSS代码*/
.container {
	width: 300px;
    height: 200px;
    margin: 100px;
    padding: 20px;
    border: 1px solid #eee;
    font-size: 13px;
    color: #555;
}
.c-red {
    color: red;
}
p {
    background-color: rgba(189, 227, 255, 0.28);
    padding: 2px 5px;
}
.mutiple {
	/*这里写上述单行换行实现部分的样式*/
}

效果如下：
在这里插入图片描述

outline属性的妙用技巧

区别：outline不计算大小 border计算大小

/*CSS代码*/
* {
	padding: 0;
	margin: 0;
}
ul {
	list-style: none;
	width: 600px;
	margin: auto;
}
li {
	padding: 10px;
	border: 10px solid pink;
	outline-offset: -10px;
}
li+li {
	margin-top: -10px; /*border不像margin那样重合会合并，不理解这里为什么要用负marin的话可以自己试试*/
}
li:hover{
	/*border: 10px solid gold;*/
	outline: 10px solid gold;
}

<!--HTML代码-->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

效果如下：
在这里插入图片描述

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

先来看看怎么把容器的滚动条搞出来👇

<!--HTML代码-->
<p class="scroll-container">
        庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。
</p>

/*容器CSS代码*/
.scroll-container {
   width: 500px;
   height: 150px;
   border: 1px solid #ddd;
   padding: 15px;
 }

此时效果如下：
在这里插入图片描述
这里需要在容器CSS代码中加一条这个属性👇

overflow: auto;

添加后，出现默认滚动条样式：
在这里插入图片描述
接下来就可以开始自定义滚动条样式啦😁

.scroll-container::-webkit-scrollbar {
	width: 8px;
	background: white;
}

/* scrollbar-corner 滚动条角落
   scrollbar-thumb  滚动条手柄
   scrollbar-track  滚动条轨道 */
   
.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;
 }

效果如下：
在这里插入图片描述

卡劵效果制作

<!--HTML代码-->
<p class="coupon">
 <span>200</span>优惠券
</p>

/*CSS代码*/
.coupon {
 width: 300px;
  height: 100px;
  line-height: 100px;
  margin: 50px auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat,
  radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat,
  radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat,
  radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2)); /*CSS3滤镜属性*/
}
.coupon span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  color: red;
  font-size: 50px;
  font-weight: 400;
}

效果如下：
在这里插入图片描述

表格边框合并

/*CSS代码*/
table {
	border-collapse: collapse;
}

<!--HTML代码-->
<table border="1">
    <thead>
	    <tr>
	      <th>第一列</th>
	      <th>第二列</th>
	      <th>第三列</th>
	      <th>第四列</th>
	    </tr>
    </thead>
    <tbody>
	    <tr>
	      <td>1.1</td>
	      <td>1.2</td>
	      <td>1.3</td>
	      <td>1.4</td>
	    </tr>
	    <tr>
	      <td>2.1</td>
	      <td>2.2</td>
	      <td>2.3</td>
	      <td>2.4</td>
	    </tr>
	    <tr>
	      <td>3.1</td>
	      <td>3.2</td>
	      <td>3.3</td>
	      <td>3.4</td>
	    </tr>
    </tbody>
</table>