前端css效果复习

最新推荐文章于 2025-07-22 19:15:48 发布

跨端蝴蝶

最新推荐文章于 2025-07-22 19:15:48 发布

阅读量642

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 网站文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_44009311/article/details/125075752

网站同时被 2 个专栏收录

19 篇文章

订阅专栏

HTML

13 篇文章

订阅专栏

页面毛玻璃

在这里插入图片描述

<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>