随笔分类 -  CSS3

第212天：15种CSS居中的方式，最全了
摘要：CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。 1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在 阅读全文
posted @ 2018-04-02 22:11 小胖橘乐乐 阅读(448) 评论(0) 推荐(1)
第161天：CSS3实现兼容性的渐变背景(gradient)效果
摘要：CSS实现兼容性的渐变背景(gradient)效果 一、有点俗态的开场白 在对CSS3支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持Opera浏览器。 本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜 阅读全文
posted @ 2018-01-30 23:12 小胖橘乐乐 阅读(318) 评论(0) 推荐(0)
第104天：web字体图标使用方法
摘要：字体图标经常使用的是 阿里图标库的：http://www.iconfont.cn/ icomoon图标库的：https://icomoon.io/ 一、阿里库字体图标使用 第一步： 首先进入阿里巴巴矢量图网站：http://www.iconfont.cn/ 第二步： 搜索你分类的关键字 然后加入购物 阅读全文
posted @ 2017-12-04 22:35 小胖橘乐乐 阅读(2121) 评论(0) 推荐(0)
第103天：CSS3中Flex布局（伸缩布局）详解
摘要：一、Flex布局 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 行内元素也可以使用Flex布局。 Webkit内核的浏览器，必须加上-webkit前缀。 注意：设为Flex布局以后，子元素的float、clear 阅读全文
posted @ 2017-12-03 22:08 小胖橘乐乐 阅读(6289) 评论(0) 推荐(2)
第102天：CSS3实现立方体旋转
摘要：CSS3实现立方体旋转 阅读全文
posted @ 2017-12-02 23:31 小胖橘乐乐 阅读(405) 评论(0) 推荐(0)
第101天：CSS3中transform-style和perspective
摘要：一、transform-style 1、transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。 有两个属性值：flat和preserve-3d。 transform-style属性的使用语法非常简单： transform-style: flat | preser 阅读全文
posted @ 2017-12-01 22:37 小胖橘乐乐 阅读(717) 评论(0) 推荐(0)
第100天：CSS3中animation动画详解
摘要：CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation； 一、Animation定义动画 CSS3的Animation是由“keyframes”这个属性来实现这样的效果，keyframes就是关键帧。下面先来看看Keyframes: Keyframes语 阅读全文
posted @ 2017-11-30 22:48 小胖橘乐乐 阅读(956) 评论(0) 推荐(0)
第99天：CSS3中透视perspective
摘要：CSS3中透视perspective 透视原理： 近大远小 。 浏览器透视：把近大远小的所有图像，透视在屏幕上。 理解浏览器的坐标系：浏览器平面为 Z=0的平面，坐标原点默认为图片的中心，可以通过更改透视原点进行更改。 perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人 阅读全文
posted @ 2017-11-29 22:55 小胖橘乐乐 阅读(11078) 评论(0) 推荐(3)
第98天：CSS3中transform变换详解
摘要：transform变换详解 本文主要介绍变形transform。 Transform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们一起来看看CSS3中transfor 阅读全文
posted @ 2017-11-28 23:06 小胖橘乐乐 阅读(774) 评论(0) 推荐(0)
第97天：CSS3渐变和过渡详解
摘要：一、渐变 渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。 可分为线性渐变、径向渐变 1、 线性渐变 （gradient 变化） linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。 2、 阅读全文
posted @ 2017-11-27 23:05 小胖橘乐乐 阅读(5011) 评论(0) 推荐(0)
第96天：CSS3 背景详解
摘要：一、背景大小 cover 完全覆盖盒子，不一定全部显示 background-size: cover; contain 背景图片最大化在盒子中等比显示，但不一定能铺满盒子 background-size: contain; 二、全屏背景自适应 三、背景原点 background-origin 背景原 阅读全文
posted @ 2017-11-26 22:40 小胖橘乐乐 阅读(302) 评论(0) 推荐(0)
第95天：CSS3 边框、背景和文字效果
摘要：1、CSS3边框： border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid; box-shadow： 阅读全文
posted @ 2017-11-25 22:30 小胖橘乐乐 阅读(388) 评论(0) 推荐(0)
第94天：CSS3 盒模型详解
摘要：CSS3盒模型详解 阅读全文
posted @ 2017-11-24 22:13 小胖橘乐乐 阅读(188) 评论(0) 推荐(0)
第93天：CSS3 中边框详解
摘要：CSS3 边框详解 其中边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。 一、边框圆角 border-radius 每个角可以设置两个值 ，x 值，y值 圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。 椭圆可分别设置 阅读全文
posted @ 2017-11-23 23:00 小胖橘乐乐 阅读(228) 评论(0) 推荐(0)
第92天：CSS3中颜色和文本属性
摘要：一、颜色的表示方式 1、 rgba(255,0,0,0.1) rgba是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha透明度。虽然它有的时候被描述为一个颜色空间 新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继 阅读全文
posted @ 2017-11-22 23:01 小胖橘乐乐 阅读(662) 评论(0) 推荐(0)
第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
摘要：一、属性选择器 其特点是通过属性来选择元素，具体有以下5种形式： 1、E[attr] 表示存在attr属性即可； div[class] 2、E[attr=val] 表示属性值完全等于val； div[class=mydemo] 3、E[attr*=val] 表示的属性值里包含val字符并且在“任意” 阅读全文
posted @ 2017-11-21 22:47 小胖橘乐乐 阅读(431) 评论(0) 推荐(0)