html tr加阴影,table tr分离并加圆角和阴影

table{

border-collapse:separate;

border-spacing:0 20px;}

td{ box-shadow:/*-5px 0 5px rgba(0,0,0,.3),-5px 0 10px rgba(255,255,255,.3),/*左部*/

0 -5px 5px rgba(0,0,0,.3),0 -5px 10px rgba(255,255,255,.3),/*顶部*/

/*5px 0 5px rgba(0,0,0,.3),5px 0 10px rgba(255,255,255,.3),/*右部*/

0 5px 5px rgba(0,0,0,.3),0 5px 10px rgba(255,255,255,.3)/*底部*/}

td{

border:1px solid #F00;

border-left:0;}

$(function() {

var tr = $('table tr');

$(tr).children('td:first-child').css({

'box-shadow' : '0 -5px 5px rgba(0,0,0,.3),0 -5px 10px rgba(255,255,255,.3),-5px 0 5px rgba(0,0,0,.3),-5px 0 10px rgba(255,255,255,.3),0 5px 5px rgba(0,0,0,.3),0 5px 10px rgba(255,255,255,.3)',

'border' : '1px solid #F00',

'border-radius' : '5px 0 0 5px'

});

$(tr).children('td:last-child').css({

'box-shadow' : '0 -5px 5px rgba(0,0,0,.3),0 -5px 10px rgba(255,255,255,.3),5px 0 5px rgba(0,0,0,.3),5px 0 10px rgba(255,255,255,.3),0 5px 5px rgba(0,0,0,.3),0 5px 10px rgba(255,255,255,.3)',

'border-radius' : '0 5px 5px 0'

});

});

1	2	3	4
5	6	7	8
9	10	11	12

html 的table tr td的使用

cellspacing 属性规定单元格之间的空间. cellpadding 属性规定单元边沿与其内容之间的空白. border 简写属性在一个声明设置所有的边框属性. border 用在table属性 ...

CSS3学习之圆角box-shadow,阴影border-radius

最近经常玩腾讯微博,出来职业习惯,看看它的CSS,里面运用了大量的css3的东东,有一处用到了Data URI,还有css e­xpression有争议的地方,对png24图片的处理也是用滤镜,类似( ...

Flutter之Decoration(边框、圆角、阴影、形状、渐变、背景图像等)

1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

转：Flutter Decoration背景设定(边框、圆角、阴影、形状、渐变、背景图像等)

1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆).  ...

html中table,tr,td

table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...

LODOP中table自动分页补线加border

LODOP中可以用ADD_PRINT_TABLE.ADD_PRINT_HTM.ADD_PRINT_HTML.ADD_PRINT_TBURL等可以输出超文本的表格,超文有超过打印项高度或纸张高度自动分页 ...

jQuery操作Table tr td常用的方法

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

汇总常用的jQuery操作Table tr td方法

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

css中table tr:nth-child(even)改变tr背景颜色： IE7,8无效

例如: .my_table tr:nth-child(even){ background:#E6EDF5; } .my_table tr:nth-child(odd){ background:#F0F ...

随机推荐

php类与对象

1.类与对象 对象:实际存在该类事物中每个实物的个体.$a =new User(); 实例化后的$a 引用:php的别名,两个不同的变量名字指向相同的内容 封装: 把对象的属性和方法组织在一个类(逻辑 ...

java集群技术(转)

来源:http://blog.csdn.net/cdh1213/article/details/21443239 序言 越来越多的关键应用运行在J2EE(Java2, Enterprise Editi ...

微信小店 API 手册

微信商铺API手册V1.13 目录 1.      商品管理接口.................................................................... ...

PC110305/UVA10188

根据我的规律,每天solved3题就感觉不行了~但是今天好像做水题做上瘾了,不过PC的题目尽管水,水得还是可以让人有进步. 这题OJ自动测评真心坑,题目看起来十分简单,测评返回三种可能: Accept ...

android项目实战 --ListView 头部ViewPager广告轮询图效果

看开源框架:https://github.com/tianshaojie/AndroidFine,里面有如下效果,特记录学习下,以后项目中用也好能够立刻想起来.   如上面所示,是常见项目中的图片轮训 ...

简介vsftpd及搭建配置

一.简介 FTP(文件传输协议)全称是:Very Secure FTP Server.   Vsftpd是linux类操作系统上运行的ftp服务器软件. vsftp提供三种登陆方式:1.匿名登录  2 ...

【干货分享】可能是东半球最全的.NET Core跨平台微服务学习资源

如果你发现还有西半球的资源,烦请相告,不胜感谢! 一..NET Core基础 微软英文官网 .NET Core 微软中文官网 GitHub 用ASP.NET内核和Azure构建现代Web应用程序 博客 ...

13.CrawlSpider类爬虫

1.CrawlSpider介绍 Scrapy框架中分两类爬虫,Spider类和CrawlSpider类. 此案例采用的是CrawlSpider类实现爬虫. 它是Spider的派生类,Spider类的设 ...

HDFS环境搭建(单节点配置)

[参考文章]:hadoop集群搭建(hdfs) 1. Hadoop下载 官网下载地址: https://hadoop.apache.org/releases.html,进入官网根据自己需要下载具体的安 ...

AngularJS的表达式、指令的学习(2)

最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...