静态网页入门讲解，制作属于你自己的网页（五）

桃扇骨 2023-07-03 03:21 41阅读 0赞

# 写在开始 #

上一次的博客中讲了CSS样式的一些属性以及CSS选择器的种类，链接为：[静态网页入门讲解，制作属于你自己的网页（四）][Link 1]

再上一次的博客讲了CSS样式的四种引用方法，链接为\[[静态网页入门讲解，制作属于你自己的网页（三）][Link 2]

本次博客是CSS样式的一些案例，通过实际的案例来直观感受CSS样式，那么我们就开始吧！

# 代码实现 #

**1.RGBA透明度效果**

<!DOCTYPE HTML>
    <html>
    <head>
        <title>RGBA透明度</title>
        <style type="text/css">
        li.rgba {
         
        	float: left;
            width: 100px;
            height: 80px;
            border: #CCC solid 1px;
            text-align: center;
            font-size: 12px;    
        }
        li.rgba1 {
          
            background: rgba(255, 0, 0, 1);    
        }
        li.rgba2 {
          
            background: rgba(255, 0, 0, 0.8);
        }
        li.rgba3 {
          
            background: rgba(255, 0, 0, 0.6);
        }
        li.rgba4 {
          
            background: rgba(255, 0, 0, 0.4); 
        }
        li.rgba5 {
          
            background: rgba(255, 0, 0, 0.2);
        }
        li.rgba6 {
          
            background: rgba(255, 0, 0, 0);    
        }
        </style>  
    </head>
    <body>
        <div class="example-opacity">
            <p>CSS3的RGBA效果</p>
            <li class="rgba rgba1">Alpha参数为1     </li>
            <li class="rgba rgba2">Alpha参数为0.8  </li>
            <li class="rgba rgba3">Alpha参数为0.6  </li>
            <li class="rgba rgba4">Alpha参数为0.4  </li>
            <li class="rgba rgba5">Alpha参数为0.2  </li>
            <li class="rgba rgba6">Alpha参数为0     </li>
        </div>
    </body>
    </html>

![在这里插入图片描述][20200201174449163.png]  
**2.文字阴影特效**

<!DOCTYPE html>
    <html>
    <head>
        <title>文字阴影特效1</title>
        <style type="text/css">
        p {
         
            text-align: center;
            font:bold 60px helvetica, arial, sans-serif;
            color: #999;
            text-shadow: 0.1em 0.1em #333;
        }
        </style>
    </head>
    <body>
        <p>CSS3文字阴影特效</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html>
    <head>
        <title>文字阴影特效2</title>
        <style type="text/css">
        p {
         
            text-align: center;
            font:bold 60px helvetica, arial, sans-serif;
            color: #fff;
            text-shadow: black 0.1em 0.1em 0.2em;    
        }
        </style>
    </head>
    <body>
        <p>CSS3文字阴影特效</p>
    </body>  
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html>
    <head>
        <title>文字阴影特效3</title>
        <style type="text/css">
        body {
             
            background:#000;
        }
        p {
             
            text-align: center;
            font:bold 60px helvetica, arial, sans-serif;
            color: red;
            text-shadow: 0 0 4px white, 
            0 -5px 4px #ff3, 
            2px -10px 6px #fd3, 
            -2px -15px 11px #f80, 
            2px -25px 18px #f20;    
        }
        </style>  
    </head>
    <body>  
        <p>CSS3文字阴影特效</p>
    </body>  
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 2]  
**3.立体文字**

<!DOCTYPE html>
    <html>
    <head>
        <title>立体文字1</title>
        <style type="text/css">
        body {
          
            background: #000; 
        }
        p {
              
            text-align: center;          
            padding: 24px;          
            margin: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 80px;      
            font-weight: bold;      
            color: #D1D1D1;
            background: #CCC;
            text-shadow: -1px -1px white,  1px 1px #333;    
        }
        </style>  
    </head>
    <body>
        <p> 立体文字</p>
    </body>  
    </html>

![在这里插入图片描述][20200201175433411.png]

<!DOCTYPE html>
    <html>
    <head>
        <title>立体文字1</title>
        <style type="text/css">
        body {
          
            background: #000; 
        }
        p {
              
            text-align: center;          
            padding: 24px;          
            margin: 0;
            font-family: helvetica, arial, sans-serif;
            font-size: 80px;      
            font-weight: bold;      
            color: #D1D1D1;
            background: #CCC;
            text-shadow:   1px 1px white, -1px -1px #333;   
        }
        </style>  
    </head>
    <body>
        <p> 立体文字</p>
    </body>  
    </html>

![在这里插入图片描述][20200201175717468.png]

# 总结 #

怎么样？看过这几个具体的案例之后，有没有对CSS的应用有一个直观的印象呢？

当然，CSS应用的方面肯定不止这些，下次的博客中我们来讲一讲关于CSS鼠标悬停动画的一些实际案例，让用户与网页有些简单的交互！

# 结语 #

如果说这篇文章有让你学到一定的知识的话，不妨点个赞和关注，让博主能够看到。如果讲解中有什么错误和疏忽，也劳烦在评论中指出或提问，博主会第一时间进行更新和答复，谢谢！

[Link 1]: https://blog.csdn.net/weixin_44018540/article/details/104115769
[Link 2]: https://blog.csdn.net/weixin_44018540/article/details/104092456
[20200201174449163.png]: https://img-blog.csdnimg.cn/20200201174449163.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020020117435619.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200201174710144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200201175046546.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxODU0MA==,size_16,color_FFFFFF,t_70
[20200201175433411.png]: https://img-blog.csdnimg.cn/20200201175433411.png
[20200201175717468.png]: https://img-blog.csdnimg.cn/20200201175717468.png