有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

CSS3实现文字阴影的效果

代码编程 cat 11个月前 (11-01) 33次浏览 已收录 0个评论 扫描二维码
     <style>

         .box{
             width:200px;
             height:200px;
             background-color: red;
             margin:50px auto;
             color:green;
         }

         .box:nth-child(1){
             /* 盒子阴影:水平位置  垂直位置 模糊值 阴影颜色 */
             box-shadow: 0 0 10px #000;
         }

         .box:nth-child(2){
             /* 盒子阴影:水平位置  垂直位置 模糊值 阴影颜色 */
                /* 默认不定义阴影颜色,颜色与字体颜色一致 */
             box-shadow: 0 0 10px;
         }

         .box:nth-child(3){
             /* 盒子阴影:水平位置  垂直位置 模糊值 阴影颜色 */
                /* 不定义模糊值,就是相当于复制了元素---不模糊的阴影 */
             box-shadow:100px  10px ;
         }

         .box:nth-child(4){
             /* 盒子阴影:水平位置  垂直位置 模糊值 阴影颜色 */
                /* 不定义模糊值,就是相当于复制了元素---不模糊的阴影 */
             box-shadow:-100px -10px;
         }

         .box:nth-child(5){
                /* + inset 表示内阴影,不加表示外阴影 */
             box-shadow:0 0 30px green inset;
         }

         .box:nth-child(6){
                /* + inset 表示内阴影,不加表示外阴影 */
             box-shadow:0 0 30px green inset;
         }

         .box:nth-child(7){
                /* 阴影的模糊值  阴影的增强值(外延值) */
             box-shadow:0 0 30px 40px green;
         }

     </style>

 

 <body>

    <!-- 
        最常规的投影—— 不定偏移量,但是有模糊值的投影
                box-shadow:0 0 10px pink;

         最常规的投影—— 内阴影 + inset
                box-shadow:0 0 10px pink  inset;

        带偏移量的投影——
                    box-shadow:10px 10px 10px pink;    正值对于外阴影来说是向右、向下移动
                    box-shadow:-10px -10px 10px pink; 负值值对于外阴影来说是向左、向上移动

        模糊值、内阴影、阴影的颜色这几个是可选值(可以省略)

        不带模糊值的投影
                    —— box-shadow:10px 10px  pink;  相当于复制了一个元素在盒子的背后

        不带颜色的投影 
                    —— 默认与文字颜色 一致
     -->

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    
 </body>
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址