WXSS美化实践

常用属性

居中三板斧

使用display设置为弹性盒，然后利用justify-content和align-items实现文本图片内容的居中操作

display:flex;
justify-content: center;
//如果主轴是水平的，那么Flex项目将在容器内水平居中。
align-items: center;
//如果主轴是水平的，那么交叉轴就是垂直的，Flex项目将在容器内垂直居中。

极限微操

position: absolute;
//position: absolute;设置为绝对位置，可以和其他元素重合（因为z-index不同，不在同一图层），这样就有一个好处就是不会牵一发而动全身，可以肆意调整容器位置

z-index: 1;
//设置图层，设置背景的时候经常用，z-index越小，图层越靠下

margin: 0 0 0 0;
//分别为距离上，右，下，左，的边距
//只写两个的话，调整上下，左右的边距
//只写一个，调整上下左右的边距

同样可以调整位置的还有padding，但是个人感觉margin比padding好用一点

初始状态：

使用padding调整位置

使用margin调整位置

 因此个人感觉margin更适合细致的调整一下位置

模块美化一：圆角+阴影

border-radius: 30px;
//设置圆角

box-shadow: 1px 1px 1px rgb(88, 88, 88);
//设置阴影，属性分别为，水平偏移量，垂直偏移量，模糊半径，阴影颜色，可以根据自己的喜好将阴影放到想要的位置

//text-shadow是设置字体阴影的也很不错，可以自己创建艺术字效果

个人感觉，阴影可以给容器增加一种层次感，是个很不错的美化效果

 

模块美化二：渐变

background: linear-gradient(to right, #c528d3 , #2033df);
//渐变可以背景渐变，字体渐变一会再说

渐变没啥好说的都见过渐变色，整个花活吧

写一个容器外层限制大小，内层实现一个鼠标移动过去出现一个从左向右的下弧线，鼠标移开，下划线从左向右消失

主要利用

box-min-title view{
    background: linear-gradient(to right, #7e2f3b, #146420) no-repeat right bottom;
    //设置背景为渐变，to right 从左向右渐变 ，no-repeat 背景图像只显示一次（不设置重复的背景会铺满容器） ， right bottom 设置背景在右下方
    background-size: 0 2px;
    //设置背景大小，宽度为0，高度为2px，将背景设置为线性，达到下划线的效果
    transition: background-size 1s;
    //给代码增加一个过渡效果，是得background-size（背景大小）变化在1s内完成，算是一个动画效果了
}

.box-min-title view:hover{
    background-position: left bottom;
    //添加鼠标放置动画，鼠标放上去之后，背景从左下开始，增加至100%
    background-size: 100% 2px;
}

//鼠标移开时背景右在右下，背景宽度减少至0，动画效果就是从左向右消失

不设置no-repeat

 

源码+成品

.box-min-title{
    display: flex;
    width: 47%;
    margin:  20px 0 0 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-min-title view{
    background: linear-gradient(to right, #7e2f3b, #146420) no-repeat right bottom;
    background-size: 0 2px;
    transition: background-size 1s;
    position: absolute;
    margin: 30px 0 0 0;
    font-size: 30px;
}
.box-min-title view:hover{
    background-position: left bottom;
    background-size: 100% 2px;
}

因为是一个动画效果，图片不太能很好的体现，可以自己敲一下试试哦

艺术字

line-height: 50px;
//行间距
letter-spacing: 35rpx;
//字间距
font-style: italic;
//倾斜

background: linear-gradient(to bottom,rgb(93, 68, 233) ,rgb(116, 147, 177));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
//渐变字体组合拳

 

效果：艺术细菌和审美实在有限

 

.box-text{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100%;
}
//整个居中弹性盒没啥好说的

.box-text text{
    background: linear-gradient(to bottom,rgb(93, 68, 233) ,rgb(116, 147, 177));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    
/*
整个渐变字体，color: transparent;将文本设置为透明，为了显示出来渐变的背景颜色，利用 -webkit-background-clip: text; 将背景限制在文本的位置，-webkit-background-clip: text;需要 background-clip: text; 才不会有黄色问题标识，实测，只有-webkit-background-clip: text; 就可以实现功能，但是只有background-clip: text; 不行
*/

    font-size: 30px;
    font-style: italic;
    font-weight: bold;
    //分别为设置字体大小，字体倾斜，字体加粗
    
    letter-spacing: 20px;
    //设置字间距为20px
    text-shadow: 1px 1px 30px rgb(226, 143, 143);
    opacity:0.8;
    //设置字体透明度0-1
}

溜了溜了~