[JavaScript知识库] 前端css效果复习

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端css效果复习 -> 正文阅读

[JavaScript知识库]前端css效果复习

页面毛玻璃

在这里插入图片描述

<style>
    .bg {
        width: 400px;
        height: 200px;
        background-image: url('http://api.wx0725.top/sjbz?type=image&image=small');
        background-size: 100% 100%;
    }

    .mao {
        width: 300px;
        height: 150px;
        backdrop-filter: blur(5px);
    }
</style>
<div class="bg">
    <div class="mao">
        
    </div>
</div>

字母大小写

在这里插入图片描述

<style>
   .lower {
       text-transform: lowercase;
   }

   .upper {
       text-transform: uppercase;
   }

   .upperBegin{
       text-transform: capitalize;
   }
</style>
<div class="lower">ionwkefONBJ</div>
<div class="upper">ienenipeOINOINO</div>
<div class="upperBegin">anfoenwinonINONndinowni</div>

自定义首字母的样式

在这里插入图片描述

<style>
  .beginFont::first-letter{
        font-size: 30px;
        color: blueviolet;
    }
</style>
<div class="beginFont">
    我试试送你点
</div>

绘制正方形

在这里插入图片描述

<style>
    .zheng {
        height: 50px;
        background: rgb(212, 0, 0);
        aspect-ratio: 5/2;
    }

    .fang {
        height: 50px;
        background: black;
        aspect-ratio: 1/1;

    }
</style>
<div class="zheng">
</div>
<div class="fang">
</div>

指定元素样式：元素div.title 和 span 有active的样式变红，其他的active不管

在这里插入图片描述

 <style>
    .ul {
        background: blueviolet;
    }

    .ul li {
        color: rgb(9, 239, 166);
    }

    .ul li :where(div.title.active, span.active, ) {
        color: brown;
        font-weight: bold;
        font-size: 20px;
    }
</style>
<ul class="ul">
    <li>
        <div class="title">
            123
            <div><span class="active">456</span></div>
        </div>
    </li>
    <li class="active">
        <div class="title">123</div>
    </li>
    <li>
        <div class="title active">123</div>
    </li>
</ul>

图片背景和颜色背景混合显示

在这里插入图片描述

<style>
    .bgAndColor{
        width: 500px;
        height: 300px;
        background-image: url('http://api.wx0725.top/sjbz?type=image&image=small');
        background-color: rgba(191, 16, 16, 0.4);
        background-blend-mode: overlay;
    }
</style>
<div class="bgAndColor"></div>