CSS知识点:text-align-last段落最后一行设置对齐方式、transform:rotateY()翻转、渐变文字、column count列属性、平滑滚动、placeholder伪元素与selection伪类
一、text-align-last 段落最后一行设置对齐方式
text-align-last 属性规定如何对齐文本的最后一行。
注意:text-align-last 属性只有在 text-align 属性设置为 "justify" 时才起作用。
遇到问题:只有一行div时,设置div宽度 80px,设置两端对齐 text-align: justify; 文字不生效。加上 text-align-last 就行了。
.m-label{
width: 55px;
min-width: 55px;
margin-right: 10px;
text-align-last: justify;
text-align: justify;
}
二、transform:rotateY()翻转
1、问题背景:
rotate(angle) 定义 2D 旋转,在参数中规定角度。但是这个角度针对的基准点,容易引起问题,比如把一个元素翻转 180deg 的话,会有一点错位。
2、解决方案:
rotateX(angle) 定义沿着 X 轴的 3D 旋转。rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
以一个轴为基准线进行翻转,就不会产生一点错位的问题。
三、渐变文字
h1{
background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
四、column count
使用列属性为文本元素制作漂亮的列布局。
p{
column-count: 3;
column-gap: 5rem;
column-rule: 1px solid salmon; /* border between columns */
}
五、平滑滚动
html {
scroll-behavior: smooth;
}
六、placeholder 伪元素、selection 伪类
// 使用 placeholder 伪元素来改变 placeholder 样式:
input::placeholder{
font-size:1.5em;
letter-spacing:2px;
color:green;
text-shadow:1px 1px 1px black;
}
// selection 伪类设置选中元素的样式
::selection{
color:coral;
}
// decimal leading zero 将列表样式类型设置为十进制前导零
li{
list-style-type:decimal-leading-zero;
}
1、caret-color 属性用来定义插入光标(caret)的颜色,这里说的插入光标,就是那个在网页的可编辑器区域内,用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 |
的东西。
2、CSS伪类 :only-child
匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child
或者 :nth-child(1):nth-last-child(1)
,当然,前者的权重会低一点.
3、CSS 属性 list-style-type 可以设置列表元素的 marker(比如圆点、符号、或者自定义计数器样式)
li{
list-style-type:'🟧';
}