NatChen

Once you have chosen the road of life, you have to be brave enough to go to the end and never look back.

01 2018 档案

字符上下半截的高亮显示
摘要：css: .half{display:inline-block;} .half_in{height:12px;background-color:#fff; position:absolute; overflow:hidden;} .half_top .half_in,.half_bot{color: 阅读全文
posted @ 2018-01-15 15:45 NatChen 阅读(176) 评论(0) 推荐(0)
CSS3选择器:nth-child和:nth-of-type之间的差异
摘要：:nth-child和:nth-of-type之间的差异 直接看实例: p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 效果:一致,第二个p标签的文字变成了红色 p:nth-child(2) { color: red; 阅读全文
posted @ 2018-01-08 10:56 NatChen 阅读(342) 评论(0) 推荐(0)
CSS3 Backgrounds相关介绍
摘要：CSS3 Backgrounds相关介绍 1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认的位置。 2.在CSS3中，我们可以给background-position属性指定高达4个值:开始 阅读全文
posted @ 2018-01-04 15:33 NatChen 阅读(295) 评论(0) 推荐(0)
CSS垂直翻转/水平翻转提高web页面资源重用性
摘要：/*水平翻转*/ .flipx { -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); /*IE*/ filter:FlipH; } /*垂直翻 阅读全文
posted @ 2018-01-04 10:25 NatChen 阅读(314) 评论(0) 推荐(0)
CSS clip:rect矩形剪裁功能及应用
摘要：.clip{ position:absolute; clip: rect(10px 30px 20px 10px); } 可用性隐藏 阅读全文
posted @ 2018-01-02 16:46 NatChen 阅读(541) 评论(0) 推荐(0)
文字渐变方法
摘要：css代码 h1.start-gradient { display: inline-block; background: -webkit-linear-gradient(left, #4f185d , #fe5d4b); /* 背景色渐变 */ -webkit-background-clip: te 阅读全文
posted @ 2018-01-02 11:14 NatChen 阅读(212) 评论(0) 推荐(0)
纯css3棋盘图案背景以及45度斜纹背景
摘要：css代码 .stripes { height: 250px; width: 375px; float: left; margin: 10px; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; backgrou 阅读全文
posted @ 2018-01-02 10:44 NatChen 阅读(1277) 评论(0) 推荐(0)