提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

css特殊操作和效果

CSS
2023-04-18 13:13:27 时间

(1) CSS中空格的写法

<view class="uni-flex uni-column" style="text-align: left;">
    <text>合&emsp;格：{{qualifiedQuantity}}</text>
    <text>不合格：{{unqualifiedQuantity}}</text>
</view>

全角空格

(2) css文字竖排显示

<view>
    <button style="align-self: center;writing-mode: tb;" >质检合格</button>
</view>

(3) 元素横向排列的方式 参考1、参考2

(4) 隐藏

(5) 属性相关

image.png

image.png

image.png

image.png

image.png

(6) 阴影

  • 四周阴影 <view class="shape-circle uni-flex uni-column justify-center align-center margin-tb-sm"> <view class="text-lg">{{_i18n.getLanguage().device.machine}}</view> <view>{{lanObj.online}}/{{lanObj.total}}</view> <view class="text-xxl text-bold">{{onlineNum}} / {{machineNum}}</view> </view> .shape-circle { border-radius: 50%; // border: 3px #FFFFFF solid; width: 400upx; height: 400upx; background-color: #00A9E2; // box-shadow: 0 -1.5px 5px rgba(0, 0, 0, 0.1); // box-shadow: darkgrey 0px 0px 30px 5px; box-shadow: #FFFFFF 0px 0px 30px 5px; }

image.png

(7) 透明度

.bg-olive {
    background-color: #8dc63f; 
    opacity: 0.7; 
    color: #ffffff;
}

或

.bg-olive {
    /* background-color: #8dc63f; */
    background:rgba(141,198,63,0.7);//最后一个取值0-1，越小越透明
    color: #ffffff;
}

(8) 渐变 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

.grad {
  background-color: red; /* 浏览器不支持的时候显示 */
  // background-image: linear-gradient(to top,white,#00A9E2);
  background-image: linear-gradient(to top,white 15%,#ADD8E6 55%, #00A9E2 100%);
  //background-image: linear-gradient(bottom,white 15%,#ADD8E6 55%, #00A9E2 100%);
}

关于 css 不均匀渐变百分比：百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。

  • 比如background: linear-gradient(red 10%, green 85%, blue 90%)，其中： 10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。 85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。 90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。 10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
  • 比如background: linear-gradient(red 0%, green 50%, blue 50%)和 background: linear-gradient(red 0%, green 50%, blue 10%)的效果一样。这可能是因为百分比位置之间有重叠才失去渐变过渡色，另渲染有一定先后顺序吧（姑且这么认为）。

(9) border: 1px solid rgba(0, 0, 0, 0.1); 元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。其中，rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。 (10) 背景混合 mix-blend- mode

<template>
    <view class="container">
        <view class="right-top-sign"></view>
        <view class="left-bottom-sign"></view>
        <view class="left-top-sign">JACK IOT</view>
        <!-- <image src="../../static/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:350upx;mix-blend-mode: multiply;"></image> -->
        <image src="../../static/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:350upx;mix-blend-mode: screen;"></image>
        <!-- <view class="wrapper">
            <view class="left-top-sign">JACK IOT</view>
            <view class="welcome">
                欢迎回来！
            </view>
            <view class="center-content uni-flex justify-center align-center">
                <image src="../../static/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx;"></image>
            </view>
        </view> -->
    </view>
</template>
<style lang='scss'>
page{
    /* background: #fff; */
    /* background: #00A9E2; */
    /* background-image: linear-gradient(45deg, #1F9BDD, #25ABC9); */
    /* background-image: linear-gradient(45deg, #0081ff, #1cbbb4); */
}
.container{
    /* 在container中定义background-image而不是在page中,解决在app端动态图和背景融合实效的问题 */
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    padding-top: 115px;
    position:relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.right-top-sign{
    position:absolute;
    top: 80upx;
    right: -30upx;
    z-index: 95;
    &:before, &:after{
        display:block;
        content:"";
        width: 400upx;
        height: 80upx;
        background: #b4f3e2;
    }
    &:before{
        transform: rotate(50deg);
        border-radius: 0 50px 0 0;
    }
    &:after{
        position: absolute;
        right: -198upx;
        top: 0;
        transform: rotate(-50deg);
        border-radius: 50px 0 0 0;
        /* background: pink; */
    }
}
.left-bottom-sign{
    position:absolute;
    left: -270upx;
    bottom: -320upx;
    border: 100upx solid #d0d1fd;
    border-radius: 50%;
    padding: 180upx;
}
.wrapper{
    position:relative;
    z-index: 90;
    padding-bottom: 40upx;
}
.left-top-sign{
    font-size: 120upx;
    color: $page-color-base;
    position:relative;
    /* left: -16upx; */
    left: 20upx;
}
.welcome{
    position:relative;
    left: 50upx;
    top: -90upx;
    font-size: 46upx;
    color: #555;
    text-shadow: 1px 0px 1px rgba(0,0,0,.3);
}
.center-content{
    padding: 0 60upx;
}
​
/* css 滤镜 控制黑白底色gif的 */
.gif-white{  
  mix-blend-mode: multiply; 
}
.gif-black{  
  mix-blend-mode: screen;  
}
.response {
    width: 100%;
}
</style>

注意：必须在紧邻的第一个父节点设置背景，才能实现与背景融合。

拓展：滤色混合模式screen

  • 滤色计算公式 如有一个红色，其RGB值是(255,0,0)，还有一个蓝色，其RGB值是(0,0,255)，则这两个颜色使用滤色混合模式之后的颜色色值是： R = 255 – (255 – 255) * (255 – 0) / 255 = 255 G = 255 – (255 – 0) * (255 – 0) / 255 = 0 B = 255 – (255 – 0) * (255 – 255) / 255 = 255 于是最终的色值是 RGB(255,0,255)
  • 滤色模式特征 任何颜色和黑色执行滤色，还是呈现原来的颜色（如将图片、动画或视频的底色做成黑色，就能很好的和网页背景融为一体） 任何颜色和白色执行滤色得到的是白色； 任何颜色和其他颜色执行滤色模式混合后的颜色会更浅，有点类似漂白的效果
  • 应用场景：滤色模式对于在图像中创建霓虹辉光效果是非常有用

相关文章