设置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不计算大小 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>
效果如下:
参考文章:
来自:CSDN,作者:前端一零仙人
链接:https://blog.csdn.net/weixin_41556756/article/details/114196921