最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器兼容性可以看[这里] 2.counter的作用 实际上是代替了javascript作为一种计数器工具,在css中使用.元素出现了几次就默认增加多少对应值.增加值大小还可以由自己设置. 可以想象当我们设置好一次规矩之后,以后无论添加多少标签,计数工具自动帮我们算计数,不必手动输入那些值.而且这些不必借…

CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使…变形:转换 .这里我们就可以理解为变形.那都能怎么变呢? none 表示不进行变换: rotate 旋转            transform:rotate(20deg) 旋转角度可以为负数.需要先有transform-origin定义旋转的基点可为left top center right…

浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 background-color: #b3d4db; 6 } 编译之后的效果很明显,界面的布局也很合理,看起来很清晰.那么究竟这个属性是干嘛用的呢? Flex是Flexible Box的缩写,…

可以使用css3中content功能为html元素增减内容.content需要配合 E:before和E:after使用. 废话少说,看代码和效果说明: 第一种: css代码: #div1:before { content: "你使用的浏览器属性太低."; } html代码: <div id="div1">div</div> 显示效果: 第二种: css代码: #div1:after { content:"我使用的浏览器版本不低呀.…

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform…

border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”,通俗的说也就是使用图片作为(对象的)边框,这样一来边框的样式就不像以前那样只有实线.虚线.点状线...那样单调了,下面我们就来具体看一下应该怎样使用它. 首先我们来看一下与border-image相关的一些属性,有border-image-source.border-image-slice.bord…

css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transition 属性设置元素当过渡效果,是一个复合属性,包括四个简写属性: transition-property:指定CSS属性的name,transition效果(默认值:all) transition-duration(必须):过渡效果持续时间(不指定默认为0,不会有任何效果) transition…

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些都是@fo…

最近为了微信小程序,回忆起之前有接触过的弹性布局(display:Flex) 网上摘录的原文地址:https://www.cnblogs.com/xuyuntao/articles/6391728.html 因为一直是一个大概能用的状态,今天来系统的掌握一下这块,据说这是趋势,在移动端用的比较多一点,在PC端因为浏览器兼容性问题还是没有广泛引用.本人能力有限,如果有整理的不好的地方还请指出,我会第一时间更正. 话不多说,下面开始系统整理 先看上面的代码,解释一下意思,看你能认识多少(后面有注释)…

 什么是渐进增强与优雅降级? 服务器和浏览器是不同的.当服务器有新版本时,开发人员直接使用新版本的服务器提供服务即可:但是浏览器端,不同的用户使用的浏览器版本不同,型号差异大,我们不可能让用户强制更新,所以,浏览器端就需要考虑到所谓的渐进增强和优雅降级了.        渐进增强(progressive enhancement):主要用户使用低版本浏览器的比较多,所以一开始针对低版本浏览器进行构建页面,完成了基本的功能. 然后针对高级浏览器进行效果.交互增强,功能追加等来达到更好的体验. 优雅降…

有时候网站也要愚弄一下访客,比如愚人节.下面我给大家推荐个效果,就是整个页面左右颠倒了.css3 很强大,简单的几行代码就可以帮我们实现这个效果. view source   print? 01 <style type="text/css"> 02 html { 03         filter: fliph; /* for ie */ 04 } 05 body { 06         transform: rotateY(180deg); /* css3 */ 07…

clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. 用这个属性需要注意以下三点: 1.clip属性只能用于绝对定位元素,position:absolute或fixed. 2.clip属性有三种取值:auto  默认的  inherit继承父级的 一个定义好的形状,但现在只能是方形的 rect() clip: { shape | auto | inherit…

最近在学习微信小程序(重新学习微信小程序),在设计首页布局的时候,新认识了一种布局方式display:flex .guide-top{ height: 36%; display: flex; /*flex弹性布局*/ flex-direction: column; /*排列方向默认横向,column垂直*/ } .guide-top-text{ flex: 2 } .guide-top-text image{ width: 750rpx; height: 173rpx; transform: t…

CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个背景图片.代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开.第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下: background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-i…

在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n,n,n,n),你平时用到的linear.ease.ease-out等都是基于这个属性值的,那么我们接下来就看看这个东西到底是什么含义. 这个时间函数是通过一个坐标反映出来的: 这个就是timing-function的工作图,总共有4个点来描述整个曲线的运动形状,其中P0和P3是开始和截止的位置,关…

之前学css,觉得会改个样式就不错了,直到现在,在做前端开发的时候,才发现自己的前端页面是有多垃圾,而且还不知道该怎么适应各个浏览器,总是很“词穷”,最近是想着好久没去慕课上面了,于是就报着逛一逛的心态,发现了重新学习CSS3的资源......于是乎,怕之后又忘记了,就打算做个笔记 边框 border-radius border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角.右上角.右下角和左下角,顺时针 */ 实心上半圆 把高度(height)设为宽度(wid…

说明: resize属性是指定一个元素是否可由用户调整大小的. 语法: resize:none | both | horizontal | vertical none:用户不可一调整元素的尺寸(默认值) both:用户可调整元素的高度和宽度 horizontal:用户可调整元素的宽度 vertical:用户可调整元素的高度 例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &…

盒模型box-sizing: 取值 1.content-box 默认值,标准盒模型,设置宽度为内容宽度,实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度 2.border-box 设置宽度等于元素内容宽度,content包含了元素的border和padding 3.inherit 继承父元素的盒模型模式 兼容 iE8+ 解决问题: 边框和填充被计算到盒模型内,不会破坏布局…

1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  background: url("") || 0 0/cover || no-repeat || scroll || border-box || content-box || black; CSS2中的Background属性: background: background-color || bac…

HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">…

w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值.” 下面我们从最简单的语法和属性值开始一步一步来学习transition的具体使用: 语法: 1 2 3 transition : [<'transition-property'> || <'transition-duration'> || <…

transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-f…

在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div.box{transform: rotate(45deg);} /*顺时针旋转45度*/ 变形--扭曲 skew() div.box{transform:skew(45deg);} /*通过skew()函数将长方形变成平行四边形. Skew()具有三种情况: 1.skew(x,y)使元素在水平和垂直方…

通过 CSS3 提供的2d元素转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. css3中为我们 提供了: translate() rotate() scale() skew() matrix() 些方法来对对象进行位移,旋转,缩放,或者拉伸. 注意:Internet Explorer 10.Firefox 以及 Opera 支持 transform 属性. 1. translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数值移动.…

众所周知,在css3中可以用animation实现动画效果,在这里用一个transform:translateX举例. <div class="div1"></div> .div1{ margin:0 auto; width: 100px; height: 100px; border:1px solid blue; -webkit-animation-name: move; -o-animation-name: move; animation-name: mov…

transform(变形)是CSS3中的元素的属性,transform的属性值主要包括旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix 基本用法可以参考文章 CSS3 Transform. tansform-origin参考文章 CSS3 Transform——transform-origin 与transition配合使用的方法参考CSS动画 animation与transition 本文记录几个注意点: 1.transform:rotate(30…

CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果. 1定义 filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度):举个栗子: <style> img{ /*灰度100%*/ -web…

概述 这是我在写移动端页面的时候遇到的,css3中鲜为人知但又很有用的属性,记录下来,供以后开发时参考,相信对其他人也有用. tap-highlight-color 在移动端开发中,我们需要在用户轻按屏幕或按钮的时候给用户一定的反馈,这就需要tap-highlight-color这个属性了,它会在用户轻按一个链接或者JavaScript可点击元素时给元素覆盖一个高亮色,示例如下: //轻按时覆盖红色 -webkit-tap-highlight-color: red; //取消这个高亮 -webk…

css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css3新增边框属性 1.css3新增属性之border-color:为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0000ff; } 这里说一下题外话,需要注意:"border-width" 属性如果单独使用的话是不会起作用的.…

CSS3中的阴影,我知道的就是盒阴影和文字阴影.两者使用大同小异. 1.文字阴影 不知道为啥阴影会被开发出来,觉得这没啥好用啊.用了之后发现好像还行,使页面更有立体感了那么一点点.看起来趣味性强一点. 文字阴影: text-shadow:x,y,z,color; -x偏移量,x轴为文字左边 -y偏移量,y轴为文字顶部 -z:阴影模糊半径 -color:阴影颜色 理解x和y的含义,颜色可以叠加的,里面有代码!!!! 注意:阴影可以添加多层!注意;中间逗号间隔,并且需要是完整的一套(就是三个数字都要…