zoukankan      html  css  js  c++  java
  • 阴影效果的小 demo

        早上没事干,感觉字体阴影的效果还是好看的,那么就来一个小demo吧!

    1、这是html 简单的有一个标签或者盒子都可以

    <div class="demo11">我爱考试</div>

    2、css样式,用css3编写样式,感觉还不错。

    .demo11 {
        border: 1px dashed #f2b;
        height: 150px;
        width: 250px;
        text-align: center;
        line-height: 150px;
        margin: 0 auto;
        font-size: 50px;
        color: orange;
        text-shadow: 1px 1px rgba(197, 223, 248,0.8),2px 2px rgba(197, 223, 248,0.8),3px 3px rgba(197, 223, 248,0.8),4px 4px rgba(197, 223, 248,0.8),5px 5px rgba(197, 223, 248,0.8),6px 6px rgba(197, 223, 248,0.8);
    }

    3、附上一张效果图

      一个简单的字体阴影效果就是这么出来的,其中还可以定义字体的样式(font-family)效果会更好的哦!

    以上呢,这就是字体外阴影的一个小demo;

    下面呢,来看一下内阴影吧,

    1、html样式

    <div class="block black" style="background-color: #444;">
        <span style="color: rgba(0, 0, 0, 0.5);">
            I love test<br>
             我爱考试
        </span>
    </div>
    
    <br clear="all">
    
    <div class="block white">
        <span style="color: rgba(128, 128, 128, 0.5);">
            I love test<br>
             我爱考试
        </span>
    </div>

    2、简单的css样式

    <style>
    .block {
      font-size: 2em;
      font-weight: bold;
      margin: 2px;
      padding: 2px;
      border: solid #AAA 1px;
      display: inline-block;
    }
    .black {
      text-shadow: 1px 1px 2px #888, 0 0 0 #000;
    }
    
    .white {
      text-shadow: 1px 1px 2px #FFF, 0 0 0 #000;
    }
        </style>

      都是比较简单的样式,很容易理解吧!

      附上小图一张,供参考了!

    这样呢,内阴影也就出来了,虽然不是很好看,但是也挺实用的,嘻嘻!

  • 相关阅读:
    yii框架学习(安装)
    lnmp环境搭建(Ubuntu)
    shell 替换 01,02,03等不可见字符
    mongo分布式集群(三主三从三仲裁)搭建
    ES命令行操作
    服务器buffer/cache 的产生原因和释放buffer/cache
    Linux配置免密登录
    使用yum安装java时,没有jps的问题解决
    SkyWalking 搭建及简单使用
    nginx常用模块
  • 原文地址:https://www.cnblogs.com/jierui/p/4181599.html
Copyright © 2011-2022 走看看