<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/TDT/xhtml1-strit.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

 <title>CSS3凹凸字</title>

 <style type="text/css">

 body{

     background-color:#999;

 }

 p{

     font-size:40px;

     text-align:center;

 }

 .p1

 {

     margin:100px auto;

     width:200px;

     border:1px solid red;

     text-shadow:1px 1px 1px black,-1px -1px 1px white;

 }

 .p2

 {

     margin:0px auto;

     width:200px;

     border:1px solid blue;

     text-shadow:1px 1px 1px white,-1px -1px 1px black;

 }

 </style>

 </head>

 <body>

 <p class="p1">我是凸字</p>

 <p class="p2">我是凹字</p>

 </body>

 </html>

 <script>

 </script>

CSS3凹凸字的更多相关文章

  1. HTML5 Canvas核心技术—图形、动画与游戏开发.pdf2

    事件处理: HTML5应用程序是以事件来驱动的,可以在canvas中增加一个事件监听器,当事件发生时,浏览器就会调用这个监听器 //方法一canvas.onmousedown=function(e){ ...

  2. css背景雪碧图等

    1.背景图 雪碧图技术 要设置背景,是要设置在某个盒子上 <!doctype html> <html lang="en"> <head> < ...

  3. css3字阴影text-shadow

    看到text-shadow这句代码,眼尖的同学是不是觉得很熟悉?没错,前面我们已经学习过<css3基础教程五边框box-shadow>,而且这两者非常相近,只要以前的课程学好了,text- ...

  4. css3动画 一行字鼠标触发 hover 从左到右颜色渐变

    偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画  这个好像不能放视频 我就简单的描述一 ...

  5. 网页前端开发：微博CSS3适用细节初探

    浏览器,作为一神器,帮我们打开了缤纷万千的网络世界窗口.而她发展到今天,也诞生了一个又一个的怀神版本,可能有人钟情于她的花哨,有人痴迷于她的速度……我们,作为重构工程师,必然要更关注他背后的技术革新, ...

  6. CSS3 新增文本样式

    CSS3 对原来的 CSS2 版本中已定义的属性取值进行修补,增加了更多的属性值,来适应复杂环境中文本的呈现. 一.定义文本阴影 可以给文字添加阴影效果了 Shadow 影子 语法: text-sha ...

  7. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  8. HTML5 & CSS3初学者指南(2) – 样式化第一个网页

    介绍 我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使 ...

  9. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

随机推荐

  1. android视频播放器开发

    http://blog.csdn.net/u010181592/article/details/49301703 http://blog.csdn.net/qq_33291295/article/de ...

  2. Yii2.0中文开发向导——Yii2中多表关联查询（join、joinwith)

    我们用实例来说明这一部分 表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer   (id  customer_name) 订单表Order          (id  order_ ...

  3. 用JS编写日历的简单思路

    提要:本文以写当前时间环境下当月的日历表为例,用最简单的方法实现JavaScript日历,旨在展示JS世界中实用为本.简单为上的解决问题的思路. Web页中的日历一般离不开表格,通常都使用表格装载指定 ...

  4. Shiro 整合SpringMVC 并且实现权限管理

    Apache Shiro是Java的一个安全框架.目前,使用Apache Shiro的人越来越多,因为它相当简单,对比Spring Security,可能没有Spring Security做的功能强大 ...

  5. UVA 11082 矩阵解压(网络流建模)

    矩阵解压 紫书P374 建模真的是挺难的,如果直接给我这题,我是想不到用网络流的,所以还应多做网路流建模,学会如何转化成网络流 还有,现在用的EK算法是比较慢的,还应去看看Dnic和ISAP,并且理解 ...

  6. 每天一个Linux命令（3）：pwd命令

    Linux中用 pwd 命令来查看"当前工作目录"的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文 ...

  7. NBU恢复报：ORA-19554 ORA-27211

    RMAN> run {2> allocate channel ch00 type 'sbt_tape' parms='ENV=(NB_ORA_CLIENT=rac1)';3> res ...

  8. JAVA 新手问题： Request 编码编译出错，Unhandled exception type UnsupportedEncodingException

    新手: 编写如下代码 private void Exec(HttpServletRequest Req,HttpServletResponse Response) //throws ServletEx ...

  9. jsp动作标签概述

    *Jsp动作标签概述: >动作标签的作用是用来简化java脚本 >jsp动作标签是JavaWeb内置的动作标签,它们是已经定义好的动作标签,我们可以拿来直接使用. >JavaWeb一 ...

  10. 用EXcel制作不同背景的图

    Excel 绘图区分区设置不同背景色 之 条形图 样图 在Excel图表中,如对绘图区设置背景色,一般只能对整个绘图区设置同一种颜色.图案或图片为背景.但有时希望能对不同的分区设置不同的颜色作为背景, ...