随笔分类 -  css3

CSS3 transform属性
摘要：在介绍有关transform相关的知识之前，先来讲一下transform-origin的用法以及关于<angle>角度的几种取值单位。另外，在使用时，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。 transform-origin 设置对象变换的原点，通常和ro 阅读全文
posted @ 2018-01-02 18:07 铭绘 阅读(2636) 评论(0) 推荐(0)
我的CSS初始化
摘要：第二版： 解决img元素底部会出现的空白 空白的出现 做网页设计就避免不了在网页中添加图片，一些炫酷的图片可以是你的网页增色不少。对于如何在网页里添加一个图片，大家都已经很清楚了，使用< img >标签就行了。今天我们来看看在添加图片过程中出现的一个小问题。为何图片的底部会出现一个空白间隙呢。请点击 阅读全文
posted @ 2018-01-02 17:52 铭绘 阅读(318) 评论(0) 推荐(0)
CSS绘图
摘要：1. 自适应的椭圆 背景知识：border-radius属性的基本用法 使用border-radius制作一个圆很简单，只要给任何正方形元素设置固定宽高及一半长度以上的border-radius，就可以得到圆形 1234background: #fb3;width: 200px;height: 20 阅读全文
posted @ 2018-01-02 17:46 铭绘 阅读(589) 评论(0) 推荐(0)
使用CSS3实现逐格动画
摘要：首先我们有这样一张照片： 照片长度为1184px，高度为75px，共分为24格。 首先我们将DIV大小设置成单格照片的大小，49x75。这样在初始状态下看到的就是第一格的照片。 接下来定义的是最终状态也就是最后一格的状态，通过偏移量背景调整到最后一格。最后就是定义动画效果，在下面的设置中时长2秒，动 阅读全文
posted @ 2018-01-02 17:16 铭绘 阅读(271) 评论(0) 推荐(0)
《你不知道的 CSS》之等比例缩放的盒子
摘要：你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。 如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。 可以看到把宽度设置为了原 阅读全文
posted @ 2018-01-02 17:15 铭绘 阅读(2135) 评论(0) 推荐(0)
CSS属性之attr()
摘要：CSS函数attr()是用来获取被选中元素的属性值，并且在样式文件中使用。它也可以用在伪类元素里，在伪类元素里使用，它得到的是伪元素的原始元素的值。 attr()函数可以和任何CSS属性一起使用，但是除了content外，其余都还是试验性的（简单说就是不稳定，浏览器不一定支持）。 那具体怎么用呢，给 阅读全文
posted @ 2018-01-02 17:01 铭绘 阅读(11150) 评论(0) 推荐(0)
CSS技巧（三）：视觉效果
摘要：视觉效果 1. 单侧投影1.1 单侧投影 大多数人使用box-shadow的方法是，制定三个长度和一个颜色值。 1box-shadow: 2px 3px 4px rgba(0, 0, 0, .5); box-shadow第一个长度表示水平方向投影，第二个为垂直方向投影，第三个为模糊半径。 投影绘制步 阅读全文
posted @ 2018-01-02 16:22 铭绘 阅读(1068) 评论(0) 推荐(0)