纯CSS3透明水晶盒（3）
作者：a287019674 来源：蓝色理想 发布时间：2011-08-24 20:20:06
二、边框线
如果你看了代码，没有头晕的话，会不会有这么一个疑惑，为什么不用border来写边框线?
如果用border来写的话，border的宽度会跟width重叠，导致盒子占据的空间为200+1+1=202px，很恶心的数字，而且border也不贴着边界，如图：
所以用这样一种做法来实现边框效果：box-shadow/text-shadow ；
一般我们是用border来给元素描边，前几天逛论坛的时候，忘记哪个论坛了，所以没链接，见谅见谅哈...看到这样一种做法：给文字描边，或者你暂且别往下看，想想如何用css3给文字描边？
一般思维会想到text-shadow这个属性，但是它是投影，跟描边还是有区别的，text-shadow写法如下：
text-shadow:2px 0px 0px #f00;
投影效果如图：
具体的投影资料可以参考我这篇文章：CSS3阴影；
上面是在没有羽化的情况下向右偏移，然而text-shadow可以多重投影，那么如果向上下左右四个方向同时投影，会怎么样呢?
text-shadow:2px 0px 0px #f00,0px -2px 0px #f00,-2px 0px 0px #f00,0px 2px 0px #f00;
投影效果如图：
就变成适应文字形状的描边效果了，当初因为border不能满足文字的描边需求，才想出这样的法子来实现描边，那现在反推，既然border不能用来描边了，那就用box-shadow投影描边的方法来实现边框。
做出来的效果如下：
我给底部写了个投影：
-webkit-box-shadow:-1px 1px 2px rgba(50,50,50,0.1);
少许的向前向右偏移，基本的造型效果就已经出来了，但是这样还不行，盒子的透明是透明了，但是感觉朦朦胧胧的，应该加强透明的处理，要不然体现不出通透性（可以跟第一个图对比下）。
0
投稿猜你喜欢
- 前言备受期待的django 2.0已经发布了，最大的一个变化就是不再支持python2.x版本了，这也为我们还在保守使用的2.x的同学们敲响
- 今天做项目时，有一个这样的需求，需要动态删除的Tab，比如：可以删除某一个，可以删除多个。每一个Tab对应一个iframe。本来我的代码是这
- 如下所示：data = np.random.randn(20)factor = pd.cut(data,4)pd.get_dummies(f
电脑安装git客户端、注册github账号并登陆到本地项目文件夹右键选择git bash here输入个人信息(代码提交者)git conf- 用header 发送cookie header("Set-Cookie: testcookie=中文
- 本文实例为大家分享了python环境路径设置方法，以及命令行运行python脚本，供大家参考，具体内容如下找Python安装目录，设置环境路
- 随着WEB标准在国内的不断普及，结构表现行为分离、模块化、语义化、优雅退化等概念也成为考核一名前端人员对WEB标准理解的重要条目，其中，由于
- Python实现新版正方系统滑动验证码识别算法和方案步骤一：点击数据分析点击滑动按钮，将发送一个请求到 /zfcaptchaLogin请求内
- 代码实现的目的：为一个自定义的类的某个属性在使用它时候，触发某个事件。 该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他的姓名
- 本文实例为大家分享了JS实现倒计时图文效果的具体代码，供大家参考，具体内容如下<body><img src="i
- 1 The syntax of the SQL statement is verified.SQL的语法检查2 The data dicti
- 一、前言你知道当我们在网页浏览器的地址栏中输入 URL 时，Web 页面是如何呈现的吗？Web 界面当然不会凭空出来，根据 Web 浏览器地
- 背景客户最近有这样的需求，想通过统计Oracle数据库活跃会话数，并记录在案，利用比对历史的活跃会话的方式，实现对系统整体用户并发量有大概的
- pandas提供了一个灵活高效的groupby功能，它使你能以一种自然的方式对数据集进行切片、切块、摘要等操作。根据一个或多个键（可以是函数
- 效果图如下所示：实现代码如下：<!DOCTYPE html><html lang="zh-cn">
- Pygame的Font文本和字体Pygame 通过pygame.font模块来创建一个字体对象，从而实现绘制文本的目的。该模块的常用方法如下
- 第一步：首先进入python安装目录下的 【scripts】.第二步：执行安装pyqt5的命令：python37 -m pip instal
- 一、概述机器学习算法在近几年大数据点燃的热火熏陶下已经变得被人所“熟知”，就算不懂得其中各算法理论，叫你喊上一两个著名算法的名字，你也能昂首
- 时间戳是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。生产环境
- mysql 8.0.20 安装配置方法图文教程整理下，供大家参考。一、准备工作1、检查是否已经安装mysql当前计算机没有安装mysql。2
