CSS3
关注
分享
扫一扫
文章平均质量分 67
cysear
这个作者很懒，什么都没留下…
展开
-
CSS3变形与动画上
一、CSS3变形1.变形——旋转rotate()transform:rotate(-20deg);/* 以自己中心点为旋转中心，顺时针+逆时针- */2.变形——扭曲skew()transform:skew(-45deg);1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）2、skewX(x)仅使元素在水原创 2015-08-06 17:45:13 · 863 阅读 · 0 评论 -
2015-12-13复习之CSS3背景background的几个属性
background的几个属性background-color（背景颜色）background-image（背景图片）background-position（背景图片位置）background-size（背景图片大小）background-attachment（规定背景图像是否固定或者随着页面的其余部分滚动。）background-repeat（背景图片重复格式）b原创 2015-12-22 16:03:52 · 632 阅读 · 0 评论 -
2015-12-13复习之CSS3 border 详解border-image
先来提一下我们所熟知的border最基本的属性：border-width，border-style，border-color不要小看border，它还可以“画”出三角形，箭头和十字街哦先上图：神奇吧？其实只用border做到的，看到下面这张图和其相应代码，你肯定就明白了.bord{ width: 100px; heig原创 2015-12-23 15:55:26 · 1973 阅读 · 1 评论 -
css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %，大概可以分为几种“绝对单位”和“相对单位”和“百分比单位”。绝对单位：px in cm mm相对单位：em rem pt pc ex ch百分比单位：vw vh vm %下面主要说几个常用的单位px：绝对单位，页面按精确像素展示em：相对单位，转载 2017-03-17 11:19:43 · 3494 阅读 · 1 评论 -
css3弹性方块布局：Flex
浏览器的兼容CSS3弹性方块布局：flex比较适合移动端的使用，下面是各浏览器的兼容情况先说一下自己的理解。。刚开始看到这个就有点懵，怎么一会是box，一会是flexbox，一会又是flex，到底是什么鬼东西！其实他们只是不同版本的写法而已W3C各个版本的flex2009 version标志：dis原创 2017-04-18 13:53:44 · 1186 阅读 · 0 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
此文为转载，原文地址：http://www.xuanfengge.com/css3-webkit-scrollbar.html有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？前言webkit支持拥有overf转载 2017-04-20 16:03:40 · 8643 阅读 · 0 评论 -
纯css3 伪元素制作旋转小风扇
效果图 需求制作旋转的小风扇，并且颜色是可以改变的制作思路只用一个标签来承载风扇，并且颜色可以任意更改，所以只能有一个标签明码定义颜色控制旋转只要在该标签上添加动画即可所以只用一个span标签制作中间的小圆点，使用伪元素和子元素制作周边的扇叶，背景颜色继承父元素的颜色但是小圆点的展示出来的背景颜色应该是辅助颜色-浅灰色，外加一个黑色边框所以我们使用边框和原创 2017-05-26 09:10:44 · 2726 阅读 · 2 评论 -
CSS3之transform之rotate二维、三维注意点
transform:rotateX(30deg); 二维旋转Xtransform:rotateY(30deg); 二维旋转Ytransform:rotateZ(30deg); 二维旋转Ztransform:rotate(30deg,30deg); 二维旋转X,Ytransform:rot原创 2017-06-02 16:22:10 · 890 阅读 · 0 评论 -
2015-12-13复习之CSS3选择器
一、属性选择器在css3中追加了三个属性选择器[att*=val] [att^=val] [att$=val]，使得属性选择器有了通配符的概念。[att*=val]（包含）[att^=val]（首字符）[att$=val]（结束字符）二、结构性伪类选择器1、伪类选择器（link hover...）2、伪元素选择器first-line（原创 2015-12-13 16:19:43 · 524 阅读 · 0 评论 -
2015-12-13复习之CSS3盒子样式
box-sizing（content-box，border-box）默认值是content-boxcontent-box：内容大小不把border，padding包含在内通俗的讲就是，首先设定好了宽高分别为100px，再设定border和padding分别为1px，此时，容器总大小为104px，content为100px，border为1px，padding为1px。border-原创 2015-12-13 20:56:15 · 457 阅读 · 0 评论 -
2015-12-09复习之CSS(3)基础
CSS指层叠样式表selector{ property:value}派生选择器（宜居元素位置及其上下文关系来定义样式），id选择器（常常用于简历派生选择器），类选择器，属性选择器（对带有指定属性的HTML元素设置样式），属性和值选择器（） [title]{ color:red;} [title=bye]{原创 2015-12-11 21:49:31 · 532 阅读 · 0 评论 -
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform转载 2015-08-06 13:06:45 · 4716 阅读 · 0 评论 -
css3新特性1——文本效果&边框&背景&多列
什么是CSS3？CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器原创 2015-08-06 14:30:49 · 1746 阅读 · 0 评论 -
理解CSS3 transform中的Matrix(矩阵)
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/转载 2015-08-06 15:18:18 · 604 阅读 · 0 评论 -
CSS3变形与动画下
1、 Keyframes介绍Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不原创 2015-08-06 18:30:56 · 735 阅读 · 0 评论 -
超赞！源自CODEPEN的25个最受欢迎的HTML/CSS代码
http://www.uisdc.com/25-html-css转载 2015-08-07 14:00:35 · 1328 阅读 · 0 评论 -
Android之开发常用颜色
http://www.2cto.com/kf/201211/166631.html转载 2015-08-20 14:16:46 · 534 阅读 · 0 评论 -
css3之background-origin和background-clip的区别与联系
background-origin（CSS3新属性）规定 background-position 属性相对于什么位置来定位有三个属性值：border-box（忽略border，即会覆盖border的位置）padding-box（忽略padding，即会覆盖padding的位置，不会覆盖border）content-box（只显示在content中，不会覆盖bor原创 2015-12-09 17:22:43 · 2486 阅读 · 0 评论 -
2015-12-11复习之CSS3动画多列
一、column-count（将文章划分的列数）eg：column-count:3;二、column-gap（文章划分块中间的间距）eg：column-gap:40px;三、column-rule（在文章划分列位置加上颜色规则）eg：column-rule:4px outset #ff0000;四、column-span（跨列）跨列一原创 2015-12-11 23:34:26 · 440 阅读 · 0 评论 -
CSS秘密花园:磨砂玻璃效果
效果如下：转载 自 https://www.w3cplus.com/css3/css-secrets/frosted-glass-effect.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="wid转载 2018-01-11 10:56:45 · 1201 阅读 · 0 评论