CSS3实例教程:box

文章简介:box-shadow-对表格及单元格使用阴影写法及两种浏览器效果的对比。


box-shadow-对表格及单元格使用阴影写法及两种浏览器效果的对比。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>对表格及单元格使用阴影</title>
<style type="text/css">
table{
border-spacing:10px;
-webkit-box-shadow:2px 2px 5px #00f;
-moz-box-shadow:2px 5px 5px #999;
}
td{
background:#000;
-webkit-box-shadow:5px 2px 5px #00f;
-moz-box-shadow:2px 5px 5px #999;
padding:10px;
}
</style>
</head>

<body>
<table width="200" border="0">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

时间: 2024-09-10 00:42:27

CSS3实例教程:box的相关文章

CSS3实例教程:盒模型添加阴影属性box

文章简介:我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 我们要对盒模型添加阴影怎么办呢?其实它的用法与text-shadow用法一样,只不过属性名称是box-shadow. 相关文章:CSS3教程:网页文字阴影属性text-shadow box-shadow: 此属性与text-shadow一样有4个值,前两个值分别表示水平方向位移距离和垂直方向的位移距离,第三个值表示阴影的模糊半径(包含0及以下的值均表示无模糊),最后一个

CSS3实例教程代码:简单制作遨游浏览器LOGO

文章简介:CSS3实例教程代码:简单制作遨游浏览器LOGO. <!DOCTYPE HTML> <html> <head> <title>LOGO</title> <style type="text/css"> * {margin:0; padding:0} .main {width:800px; margin:50px auto 0}  .main_wrapper {width:240px; height:240p

CSS3实例教程:hover、active和:focus伪选择器

文章简介:CSS3实例教程:hover.active和:focus伪选择器. CSS3的伪类选择器就是多,今天我们来学习新的伪类选择器--UL状态伪类选择器.这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用,在默认状态下无效. 今天我们先来接触:hover.active和:focus这三种状态伪类选择器. :hover选择器.:active选择器和:focus选择器 :hover选择器:当鼠标悬停在所指定的元素上时所使用的样式: :active选择器:当所指定的元

CSS3实例教程:详解calc()函数功能

文章描述:就算你通过繁琐的方法实现了,但有于浏览器的兼容性而导致最终效果不一致.虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题,其实今天的calc()函数功能实现上面的效果来得更简单. calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分.因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我

CSS3实例教程:css3的transition

文章简介:相信对于很多初学者,对于css3的transition到底是直接写在选择器上,还是写在选择器的hover上表示疑惑,下面给出两个实例,希望可以为您解惑. 相信对于很多初学者,对于css3的transition到底是直接写在选择器上,还是写在选择器的hover上表示疑惑,下面网页教学网给出两个实例,网页教学网希望可以为您解惑. <div id="demo1" class="demo">demo1</div> <div id=&q

CSS3实例教程:IE不支持CSS3效果的特殊处理

文章简介:透明度属性是 CSS 中非常常用和流行的一个属性,目前已经广泛被主要浏览器支持,可惜的是 IE6/7/8 均不支持该属性.虽然 IE 没有支持这个 CSS 属性,但是我们可以通过使用 IE 特有的滤镜 filter 属性来实现相同效果. Opacity 透明度 透明度属性是 CSS 中非常常用和流行的一个属性,目前已经广泛被主要浏览器支持,可惜的是 IE6/7/8 均不支持该属性.虽然 IE 没有支持这个 CSS 属性,但是我们可以通过使用 IE 特有的滤镜 filter 属性来实现相

CSS3实例教程:使用border

文章简介:熟练使用border-radius. 这个实例的目的:熟练使用border-radius 涉及的属性:border-radius .linear-gradient . box-shadow 提示:":before" ":after",IE对after.before是不支持的,请在firefox.opera.chrome下试调! 要求浏览器:firefox.opera.chrome 效果图: 先看下大致的步骤: 1.定义class,绘制一个矩形: 2.用bo

html5 css3实例教程

 之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. 实现的代码. html代码: 代码如下: <svg version="1.1" id="Layer_1" xmlns="http://www.jb51.net/2000/svg" xmlns:xlink="http://www..j

CSS3实例教程:详细讲解Clip属性

文章简介:我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性. Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果. 我可以确定Clip属性有很多同学并不知道,因为这个属性使用率非常的底,我初次接触是在Drupal的主题之中,他们有一段用来隐藏文本的代码,就是使用的clip属性. /* Hide only visually,