前端css效果复习

Posted 2023-02-22 流星蝴蝶没有剑

1. 页面毛玻璃

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

2. 字母大小写

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

3. 自定义首字母的样式

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

4. 绘制正方形

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

5. 指定元素样式：元素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>

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

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