css text-transform All In One
uppercase / 字母大小写
/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;
/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;
demo
/*
影响因素，
font-family
font-weight
font-size
width
height
字间距,行高等等属性
*/
https://codepen.io/xgqfrms/pen/ExvJmqp
// $font: 'Poppins', sans-serif;
$font: sans-serif;
// ::selection { background-color: #C3CFE2; }
body {
100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
// background: linear-gradient(to right, #FDFBFB, #EBEDEE 70%);
}
.text {
text-transform: uppercase;
// background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
// background: linear-gradient(135deg, #fe9eff, #99fffc 33%, #eaffa7 66%);
background: linear-gradient(to right bottom, #fe9eff, #99fffc 50%, #eaffa7 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font: {
size: 20vw;
family: $font;
font-weight: 800;
};
}
refs
https://www.cnblogs.com/xgqfrms/p/13560134.html
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！