
- 外文名
- Cascading Style Sheets Level 3
- 草案完成时间
- 2001年5月23日
- 简 称
- CSS3
- 中文名
- 层叠样式表3级
- 制订时间
- 1999年
-
细说CSS(CSS+CSS3)
2019-07-19 10:05:13本课程包含7章45个小节课程,内容涵盖:CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。 -
CSS3+JS完美实现放大镜模式
2020-12-01 11:21:14大概一年多之前写过一篇文章:仿放大镜效果的几种方式原理解析,别看标题这么牛气哄哄,其实也就算是介绍了css里的transform和animation两种动画方式 —— 当然,...但是CSS3自定义变量的出现让我看到了“希望之光”大概一年多之前写过一篇文章:仿放大镜效果的几种方式原理解析,当时觉得自己技术可以了、飘了,于是就起了这样牛气哄哄的标题,其实也只算是介绍了css里的transform和animation两种动画方式 —— 当然,实现的效果也是巨简单的那种…惭愧。
虽然后来随着技术的增长又逐渐实现了canvas方式的放大镜以及用纯JS实现了另一种“淘宝式”的模型,但是仍然不尽人意:因为实现起来太复杂了,而且需依赖大部分JS逻辑,移动和显示的效果均依赖JS,通过JS计算偏移量再渲染样式。
但是CSS3自定义变量的出现让我看到了“希望之光”!
先看效果:
其实现核心:
- CSS函数,如:
calc()
—— 动态计算;var()
—— 使用自定义变量 - CSS伪元素:
::before/after
—— 方便控制,而且独立于文档流之外,易于渲染 - JS API:
offsetX/offsetY
:相对父节点区域左上角定位 - …
其实我们具体要实现的就是:在鼠标移入时显示出来一个小圆圈(跟着鼠标走),这个小圆圈到哪,哪里的图片区域就放大相应的倍数并且显示在圆圈内。
为什么要用offset API?
其实根据上面的描述,我们需要实时获取鼠标的左偏移量和上偏移量,而这两个偏移量是相对父节点的。通过左偏移量和上偏移量结合calc()
即可计算放大镜显示内容相对父节点的显示位置。
不难找到在鼠标事件对象中,js为我们提供了如下API:screenX/screenY
:相对屏幕区域左上角定位,若发生滚动行为,则相对该区域定位pageX/pageY
:相对网页区域左上角定位clientX/clientY
:相对浏览器可视区域左上角定位offsetX/offsetY
:相对父节点区域左上角定位,若无父节点则相对<html>
或<body>
定位
但相较而言唯一符合要求的就只有offset“相对于父元素”了。
<div class="bruce"> <div class="magnifier"></div> </div>
let magnifier=document.querySelector(".magnifier"); magnifier.addEventListener("mousemove",e=>{ //控制“镜子”小圆圈的移动 });
放大镜显示内容其实就是将原图像放大N倍,通过上述偏移量按照比例截取一定区域显示内容。
先定义相关的css变量。我们设定放大倍率为2.5倍,那么被放大图像的宽高也是原来宽高的2.5倍。声明两个变量,分为为
--x
和--y
::root{ --ratio: 2.5; --box-w: 600px; --box-h: 400px; --outbox-w: calc(var(--box-w) * var(--ratio)); --outbox-h: calc(var(--box-h) * var(--ratio)); } .bruce{ margin-top: 50px; } .magnifier{ --x:0; --y:0; overflow: hidden; position: relative; width: var(--box-w); height: var(--box-h); background: url("img/nan.png") no-repeat center/100% 100%; cursor: grabbing; }
图片以背景图的形式展示,方便控制大小。
很显然在这个场景下无需插入子节点作为放大镜的容器了,使用
::before
即可!放大镜在使用时宽高为100px,不使用时宽高为0。通过绝对定位布局放大镜随鼠标移动的位置,即声明left和top,再通过声明
transform:translate(-50%,-50%)
将放大镜补位,使放大镜中心与鼠标光标位置一致。由于声明left和top定位放大镜的位置,还可以声明will-change
改善left和top因改变而引发的性能问题!
而且用CSS解决这些问题的另一个好处就是:借助于伪元素/伪类,我们可以将一些比较细节的东西用CSS解决,而不是寄托于“繁重”的JavaScript。比如:鼠标移入样式hover:.magnifier::before{ --size: 0; position: absolute; left: var(--x); top: var(--y); border-radius: 100%; width: var(--size); height: var(--size); box-shadow: 1px 1px 3px rgba(0,0,0,.5); content: ""; will-change: left,top; transform: translate(-50%,-50%); } .magnifier:hover::before{ --size: 100px; }
接下来使用background实现(展示)放大镜内容。依据放大倍率为2.5倍,那么可声明size:
--outbox-w --outbox-h
,通过 position-x 和 position-y 移动背景即可,最终可连写成background:#333 url(背景图片) no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h)
。
其中 --scale-x 和 --scale-y 对应 position-x 和 position-y (即background-position
),用于随着鼠标移动而改变背景位置。--scale-x: calc(var(--size) / var(--ratio) - var(--ratio) * var(--x)); --scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y));
那么上面mousemove函数中改变镜子的“位置坐标”就可以这么写了:
e.target.style.setProperty("--x",`${e.offsetX}px`); e.target.style.setProperty("--y",`${e.offsetY}px`);
so eazy~
最终的CSS内容如下:
:root{ --ratio: 2.5; --box-w: 600px; --box-h: 400px; --outbox-w: calc(var(--box-w) * var(--ratio)); --outbox-h: calc(var(--box-h) * var(--ratio)); } .bruce{ margin-top: 50px; } .magnifier{ --x:0; --y:0; overflow: hidden; position: relative; width: var(--box-w); height: var(--box-h); background: url("img/nan.png") no-repeat center/100% 100%; cursor: grabbing; } .magnifier::before{ --size: 0; --scale-x: calc(var(--size) / var(--ratio) - var(--ratio) * var(--x)); --scale-y: calc(var(--size) / var(--ratio) - var(--ratio) * var(--y)); position: absolute; left: var(--x); top: var(--y); border-radius: 100%; width: var(--size); height: var(--size); background: #333 url("img/nan.png") no-repeat var(--scale-x) var(--scale-y)/var(--outbox-w) var(--outbox-h); box-shadow: 1px 1px 3px rgba(0,0,0,.5); content: ""; will-change: left,top; transform: translate(-50%,-50%); } .magnifier:hover::before{ --size: 100px; }
若是
::before
中想要用一张本身就是2倍大小的图片,则background中将--outbox-w
和--outbox-h
替换为原本的--box-w
和--box-h
再做适当的微调即可。!
注意看你放大镜中的内容,它表明不只是简单的图片的放大,所以才有了var(--size) / var(--ratio)
这一段代码;
关于css中修改css3自定义变量:我仍然认为只能在“同级同属”范围内才能修改并显示成功。 - CSS函数,如:
-
css1 css2 css3 区别
2018-02-10 13:28:16css1 css2 css3 区别 CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。 但自从CSS1的版本之后,又在1998年5月发布了CSS2版本,样式单得到了更多的充实...css1 css2 css3 区别
CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。
但自从CSS1的版本之后,又在1998年5月发布了CSS2版本,样式单得到了更多的充实。
CSS2.0提供给我们了一个机制,让程序员开发时可以不考虑显示和界面就可以制作表单和界面,显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。
CSS2.0是一套全新的样式表结构,是由W3C推行的,同以往的CSS1.0或CSS1.2完全不一样,CSS2.0推荐的是一套内容和表现效果分离的方式,HTML元素可以通过CSS2.0的样式控制显示效果,可完全不使用以往HTML中的table和td来定位表单的外观和样式,只需使用div和 Li此类HTML标签来分割元素,之后即可通过CSS2.0样式来定义表单界面的外观。
CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。
简单来说就是css2有的属性css3都有,但是css3有的属性css2不一定有。 CSS3是最新的版本,效果上CSS2是比不了的,css3可以说是css2的进阶,因为css3是在css2的基础上增加了一些新的属性。比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等很多,这个是CSS2上没有的效果,现在新版本的浏览器基本都支持CSS3,比如IE9、FF4+、chrome11+,但是要用CSS3开发网站的话,要考虑的是还在用低版本浏览器的用户。
-
HTML5+CSS3 精美登陆界面源码
2016-01-19 09:52:443个很精美的登陆界面,全都是用HTML5+CSS3开发的,所以可能不适合低版本IE浏览器。大家可以下来看看,做的超级漂亮的。 -
HTML5和CSS3
2017-11-23 11:21:58HTML5新特性和CSS3的使用案例,从入门到精通。 -
CSS3box-shadow属性详解
2019-04-27 19:18:37CSS3 --添加阴影(盒子阴影的使用) CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。...CSS3 --添加阴影(盒子阴影的使用)
CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用)
CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用:
1、盒子阴影box-shadow
box-shadow属性向box添加一个或多个阴影。
语法:
box-shadow: offset-x offset-y blur spread color inset;
ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
词解释:blur:模糊 spread:伸展 inset:内凹
参数解释:
- offset-x:必需,取值正负都可。offset-x水平阴影的位置。
- offset-y:必需,取值正负都可。offset-y垂直阴影的位置。
- blur:可选,只能取正值。blur-radius阴影模糊半径,0即无模糊效果,值越大阴影边缘越模糊。
- spread:可选,取值正负都可。spread代表阴影的周长向四周扩展的尺寸,正值,阴影扩大,负值阴影缩小。
- color:可选。阴影的颜色。如果不设置,浏览器会取默认颜色,通常是黑色,但各浏览器默认颜色有差异,建议不要省略。可以是rgb(250,0,0),也可以是有透明值的rgba(250,0,0,0.5)。
- inset:可选。关键字,将外部投影(默认outset)改为内部投影。inset 阴影在背景之上,内容之下。
注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。
二、box-shadow使用
1、水平垂直偏移为0也可以有阴影
如果offset-x或offset-y值为0,则阴影在元素背后,此时给blur-radius值或spread值可以产生阴影效果。
例子:
第一个div通过设置blur-radius产生阴影效果。
第二个div通过设置spread正值产生阴影效果。
第三个div通过设置spread负值产生阴影效果。
但是有一点要注意:扩展阴影必须和阴影模糊半径配合使用。
我个人觉得应该是没有配合使用这一说,但不可能只设置扩展阴影,因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话,会被浏览器当做模糊阴影来解析,所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”,如果只用扩展阴影,可以写成:box-shadow:0 0 0 1px;。
<style> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted red; display: inline-block; } .blur{ box-shadow: 0 0 20px ; /*box-shadow: 0 0 20px green;*/ /*也可以自定义颜色*/ } .spread-positive{ box-shadow: 0 0 20px 5px ; /* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/ } .spread-negative{ box-shadow: 0 0 20px -5px ; /* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/ } </style> </head> <body> <div class="blur"></div> <div class="spread-positive"></div> <div class="spread-negative"></div> </body>
2、设置水平垂直偏移得到阴影效果outset情况:水平垂直偏移为0,但是不设置blur和spread,看不到阴影,因为此时box-shadow的周长和border-box一样,所以可以通过设置偏移让阴影显示出来。
inset情况:水平垂直偏移为0,不设置blur和spread,同样看不到阴影,因为此时box-shadow的周长和padding-box一样,同样可通过设置偏移让阴影显示出来。
例子:
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; } .shadow0{box-shadow: 0 0;} .shadow1{box-shadow: 1px 1px;} .shadow10{box-shadow: 10px 10px;} .inset-shadow0{box-shadow: 0 0 inset;} .inset-shadow1{box-shadow: 1px 1px inset;} .inset-shadow10{box-shadow: 10px 10px inset;} </style> <body> <div class="shadow0"></div> <div class="shadow1"></div> <div class="shadow10"></div> <div class="inset-shadow0"></div> <div class="inset-shadow1"></div> <div class="inset-shadow10"></div> </body>
3、投影方式投影方式默认是outset,即外部投影,可设置inset让向内投影。
例子:第一个div默认outset,第二个设置inset,第三个同时设置两个阴影可以更好的看到outset和inset的关系,第四个div可以看出inset阴影在背景之上,内容之下。
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; vertical-align: top; } .outset{ box-shadow: 10px 10px teal; } .inset{ box-shadow: 10px 10px teal inset; } .double{ box-shadow: 10px 10px teal inset,10px 10px teal; } .bg{ background-color: yellow; } </style> <body> <div class="outset"></div> <div class="inset"></div> <div class="double"></div> <div class="inset bg">inset阴影在背景之上,内容之下</div> </body>
4、如果元素同时指定border-radius属性,则阴影呈现相同的圆角。<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; border: 10px dotted pink; display: inline-block; border-radius: 50px; } .shadow{ box-shadow: 0 0 10px 10px green; } </style> <body> <div class="shadow"></div> </body>
5、经典例子w3c中的一个例子。http://www.w3.org/TR/css3-background/#the-box-shadow
可见:- border-radius会以相同的作用影响阴影外形
- border-image,padding不会影响阴影的任何外形
- 阴影box和box模型一样
- 外阴影在对象背景之下,内阴影在背景之上。
- 层次:内容>内阴影>背景图片>背景颜色>外阴影
6、多重阴影
这个效果在上面就看到了,现在再补充一些内容。
语法:可以设置任意多个阴影,用逗号隔开。
一个box有多重阴影时,需要注意顺序:多个阴影从上往下分布,第一个阴影在最顶层。
举例:单边阴影效果
先解释一下:可单独设置左边框的阴影,右边框的阴影,上边框的阴影,下边框的阴影,其实这样说也对,因为效果看起来就是这样,但根本原因是阴影在盒子后面,只是让阴影的位置发生了变化,其他3 个边的阴影还是存在的,只是被覆盖住了而已,所以,设置某个边的阴影是个很虚的东东了,哎,网上这种说法初看还让我略感困惑,所以我这里说是单边阴影效果,告诉大家只是一种效果,本质还是个box。
例子解释:给第一个div的上右下左border分别设置红橙黄绿,四种颜色,则red-shadow在最顶层,green-shadow在最底层,如下图左。
给其加上blur模糊半径,效果更明显,如下图中,可见red-shadow的模糊半径不受干扰,因为在最顶层;接下来orange-shadow次之,被red-shadow的radius干扰;yellow-shadow被orange-shadow和red-shadow的radius干扰;同理green-shadow被它上面的所有shadow的radius干扰。
如果还是不太理解,那给red-shadow设置一个很大的radius,比如50,就可以看到非常明显的效果了,见下图右。
<style type="text/css"> div{ width: 100px; height: 100px; margin:50px; display: inline-block; border: 10px dotted pink; } .shadow{ box-shadow: 0 -5px red, 5px 0 orange, 0 5px yellow, -5px 0 green; } .blur-shadow{ box-shadow: 0 -5px 5px red, 5px 0 5px orange, 0 5px 5px yellow, -5px 0 5px green; } .big-redShadow{ box-shadow: 0 -5px 50px red, 5px 0 5px orange, 0 5px 5px yellow, -5px 0 5px green; } </style> <body> <div class="shadow"></div> <div class="blur-shadow"></div> <div class="big-redShadow"></div> </body>
7、阴影和布局
阴影不影响布局, 但是可能会覆盖其他box或者其他box的阴影。
阴影不触发滚动条,也不增加滚动区域的大小。
所以布局时可忽略阴影。
8、spread妙用
用spread模拟实现border
<style type="text/css"> div{ width: 100px; height: 100px; display: inline-block; margin:10px; vertical-align: top; } .border{ border:1px solid red; } .spread{ box-shadow: 0 0 0 1px red; } .muli-border{ box-shadow: 0 0 0 2px red,0 0 0 4px green,0 0 0 6px blue; } </style> <body> <div class="border">border</div> <div class="spread">box-shadow</div> <div class="muli-border">多重<br/>box-shadow</div>
用spread实现双色方括号
<style type="text/css"> .decorator { width: 300px; height: 100px; padding: 30px; box-shadow: -30px -30px 0 -25px red,30px 30px 0 -25px green; } </style> <body> <div class="decorator">段落内容:用box-shadow模拟双色方括号box-shadow: -24px -24px 0 -20px red,24px 24px 0 -20px green; </div> </body>
-
名师精讲CSS3
2015-12-28 14:05:09CSS3即层叠样式表(Cascading Style Sheet), 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的... -
[ CSS-CSS3 ] 更适合你的CSS样式一览表
2020-04-05 16:33:27文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和positionCSS3CSS3(I) 圆角边框与阴影CSS3(II) 文本与...CSS样式一览表
CSS样式
CSS添加方法
- CSS添加方法—行内
<p style = “color:red;”> 段落文字 </p>
- CSS添加方法—内嵌样式
<style type="text/css"> p{ color:red; /*设置字体颜色*/ } </style>
- CSS添加方法—外部样式表
<link rel="stylesheet" href="css/style.css" />
1.多重样式可以层叠,可以覆盖
2.样式的优先级按照“就近原则”:
行内样式> 内嵌样式> 链接样式>浏览器默认样式CSS选择器
标签选择器 p
h1 {font:“黑体";font-size:20px;} p {color:red; font-size:16px;} hr {width:200px;}
类别选择器 .one
/*CSS*/ <style type="text/css"> .one{ font-size:18px; } </style> /*HTML*/ <p class="one">类别1</p>
ID选择器 #left
/*CSS*/ <style type="text/css"> #one{font-size:12px;} #two{font-size:24px;} </style> /*HTML*/ <body> <p id="one">文字1</p> <p id="two">文字2</p> </body>
嵌套声明 p□span
/*CSS*/ <style type="text/css"> p span{ color:red; } </style> /*HTML*/ <body> <p> <span>123</span> 456</p> </body> </style>
集体声明 p,h1
/*CSS*/ <style type="text/css"> h1, p { text-align:center; } </style> /*HTML*/ <body> <h1>欢迎</h1> <p>访问</p> </body>
全局声明 *
/*CSS*/ <style type="text/css"> *{ text-align:center; } </style> /*HTML*/ <body> <h1>欢迎访问</h1> <p>欢迎访问</p> <h2>欢迎访问</h2> </body>
CSS样式(I) 文本
- 单位
单位 描述 px 像素 em 自动适应用户所使用的字体 % 百分比 - 颜色
颜色 描述 red,blue,green 颜色名HTML颜色名 rgb(x,x,x) RGB 值 每个颜色分量取值0-255 rgb(x%, x%, x%) RGB 百分比值 0%-100% rgba(x,x,x,x) RGB 值,透明度 a值:0.0-1.0 #rrggbb 红色: #ff0000 红色: #f00 去掉重复位 - 文本
属性描述 取值 color 文本颜色 red , #f00 ,rgb(255,0,0) letter-spacing 字符间距 2px , -3px line-height 行高 14px 1.5em 120% text-align 对齐 center left right justify text-decoration 装饰线 none overline underline line-through text-indent 首行缩进 2em - 字体font
属性 描述 Value font 在一个声明中设置所有的字体属性 font: bold 18px ‘幼圆’ font-family 字体系列 网页安全字体 font-family: “Hiragino Sans GB”, “Microsoft YaHei”, sans-serif; font-size 字号 14px 120% font-style 斜体 italic font-weight 粗体 bold font属性简化的使用方法
font: 斜体 粗体 字号/行高 字体
font: italic bold 16px/1.5em ‘宋体’;CSS样式(II) 背景与超链接
- CSS背景
背景属性 取值 背景颜色 background-color: red , #f00 ,rgb(255,0,0) 背景图片 background-image: url(“logo.jpg”) 背景重复 background-repeat: repeat repeat-x repeat-y no-repeat 背景 background 颜色 图片 repeat - CSS超链接
链接的四种状态 描述 a:link 普通的、未被访问的链接 a:visited 用户已访问的链接 a:hover 鼠标指针位于链接的上方悬停 a:active 链接被点击的时刻 按照以下次序:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后CSS样式(III) 列表与表格
- 列表List
属性 描述 list-style 所有用于列表的属性 设置于一个声明中 list-style-image 为列表项标志设置图像 url(“images/bullet1.gif”); list-style-position 标志的位置 list-style-position: inside ;list-style-position: outside; list-style-type 标志的类型 - list-style-type
值 描述 none 无标记 disc 默认,标记是实心圆 circle 标记是空心圆 square 标记是实心方块 decimal 标记是数字 lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-Greek 小写希腊字母(alpha, beta, gamma, 等。) lower-latin 小写拉丁字母(a, b, c, d, e, 等。) upper-latin 大写拉丁字母(A, B, C, D, E, 等。) - CSS表格
CSS表格 描述 width , height 设置表格大小 border 属性 边框 border: 1px solid #eee; border-collapse 属性 合并边框 border-collapse:collapse; 奇偶选择器 :nth-child(odd|even) CSS布局与定位
盒子模型(I) overflow和border
- 盒子模型组成
- overflow属性
overflow属性描述 取值 超出部分不可见 hidden 显示滚动条 scroll 如果有超出部分,显示滚动条 auto - border属性
border属性 描述 border-width: px、 thin、medium、thick border-style: dashed、dotted、solid、double border-color: 颜色 border: width style color 盒子模型(II) padding和margin
- 对浏览器默认的设置清零
*{
margin: 0;
padding: 0; } - padding margin 属性
组成 内边距 外边距 上右下左 padding:5px; margin:5px; 上 padding-top :10% ; margin-top :10% ; 左 padding-left ;margin-left ; 右 padding-right;margin-right ; 下 padding-bottom;margin-bottom; - margin合并
- 水平居中
图片、文字水平居中 text-align:center;
div水平居中 margin:0 auto;
- font-size:0; 解决图片自动生成的空隙
CSS定位机制 display、float和position
- 文档流定位 flow
元素分类——block 描述 block元素特点 1.独占一行 2.元素的height、width、margin、padding都可设置 常见的block元素 div、p、h1…h6、 ol、ul、table、form 将元素显示为block元素 从而使元素具有块状元素特点 display:block; 元素分类——inline 描述 inline元素特点 inline元素之间有一个间距问题 常见的inline元素 span a 将元素显示为inline元素 从而使元素具有行内元素特点 display:inline; 元素分类——inline-block 描述 inline-block元素特点 1.不单独占用一行 2.元素的height、width、margin、padding都可设置 常见的inline-block元素 img 将元素显示为inline-block元素 从而使元素具有行内和块状元素特点 display:inline-block; 元素不会被显示 display: none;
- 浮动定位 float
浮动定位 取值 float属性 left、right clear属性 left、right、both - 层定位 layer
position属性 描述 static:默认值 没有定位,元素出现在正常的流中 top, bottom, left, right , z-index无效 fixed:固定定位 相对于浏览器窗口进行定位top, bottom, left, right , z-index 有效 relative:相对定位 相对于其直接父元素进行定位 top,bottom,left,right,z-index有效 absolute:绝对定位 相对于 static 定位以外的第一个父元素 进行定位top, bottom, left, right , z-index 有效 相对定位 绝对定位 relative absolute 文档流中原位置保留 文档流中原位置不保留 定位参照物直接父元素 定位参照物非static的父元素 CSS3
CSS3(I) 圆角边框与阴影
- border-radius属性
圆角边框border-radius 描述 border-radius: 25px; 上右下左25px 半径为25px的圆 border-radius: 20px 12px 24px 32px; 上右下左圆角为25px 12px 24px 32px border-top-left-radius 左上角的形状 border-top-right-radius 右上角的形状 border-bottom-left-radius 左下角的形状 border-bottom-right-radius 右下角的形状 - 阴影box-shadow
盒子阴影:水平位移10px,垂直位移10px,阴影模糊5px,阴影颜色#888
box-shadow: 10px 10px 5px #888;
CSS3(II) 文本与文字
- text-shadow属性
text-shadow属性 :水平偏移 垂直偏移 阴影大小 颜色
h1 { text-shadow:2px 2px #FF0000; }
- word-wrap属性
允许长单词、URL强制进行换行
word-wrap属性: normal
word-wrap属性: break-word
- @font-face规则
生成其他字体格式链接
CSS3(III) 2D转换
2D 转换方法 对元素进行旋转、缩放、移动、拉伸
- 旋转transform:rotate( deg);
- 缩放transform:scale(x,y);
- x:水平方向缩放的倍数
- y:垂直方向缩放的倍数,若省略,同x
- 0~1,缩小;>1放大
CSS3(IV) 过渡与动画
- 过渡 transition属性
将元素的某个属性从“一个值” ,在指定的时间内过渡到“另一个值”
过渡transition 描述 transition 属性名 持续时间 过渡方法 transition-property 属性名|all 对哪个属性进行变化 transition-duration 持续时间 transition-timing-function 过渡使用的方法(函数) transition-delay 延迟 - transition-timing-function属性取值
值 描述 linear 匀速 ease 慢快慢 ease-in 慢快 ease-out 快慢 ease-in-out 慢快慢 - 动画
(1)定义动画@keyframes规则
(2)调用动画animation属性
(3)animation属性取值
值 描述 animation 简写 animation-name 引用 @keyframes 动画的名称 animation-duration 动画完成时间 animation-timing-function 规定动画的速度曲线。默认是 “ease”。 animation-play-state running | paused CSS3(V) 3D变换
- 3D移动
沿X轴移动 - tranform: translateX( px);
沿Y轴移动 - tranform: translateY( px);
沿Z轴移动 - tranform: translateZ( px);
- 透视效果
本文整理自中国大学MOOC网/Web前端开发 孙俏老师的PPT和视频内容,如果有不清晰的知识点,可以搜索孙俏老师的视频进行学习,整理不易,有用记得收藏+点赞+评论哦。
-
CSS3简介
2018-05-13 11:29:49文章介绍:介绍CSS3是什么以及它能够为Web页面做什么,还会介绍如何使用javascript有效地控制CSS3的功能1,特定厂商的属性和前缀 CSS厂商前缀是浏览器公司在新的或实验性的CSS3功能成为正式的CSS3规范之前,或者在一... -
HTML5 3D/CSS3 3D爱心动画项目实例源码
2014-08-20 11:30:37大家可以点解DEMO来看看。CSS3代码,对这些线条进行渲染,以便其有3D的视觉效果。很多div,主要是构造爱心的线条区域。 -
CSS3文字描边效果
2017-09-25 19:17:55CSS3 文字描边 -
什么是CSS3,CSS3能做什么?
2018-11-23 10:20:41CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1 的基础上增加了很多强大的新功能,目前主浏览器 Chorme、Safari、Firefox、Opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。在编写CSS3... -
CSS3关键帧
2020-03-15 09:51:27CSS3关键帧 CSS3 @keyframes keyframes定义 关键帧,可以指定任何顺序排列来决定animation动画变化的关键位置 使用说明 使用@keyframes规则创建动画,通过逐步改变从一个CSS样式设定到另一个。 在动画中可以通过@... -
CSS3新特性
2019-01-24 16:31:54CSS3新特性 欢迎访问我的博客https://qqqww.com/,祝所有码农同胞们早日走上人生巅峰,迎娶白富美~~ 声明:本文参考 W3C CSS3 教程、菜鸟教程等,详细移步 W3C 或菜鸟教程 用 CSS3 做过一些小动画,很... -
H5+CSS3移动商城实战课程
2019-05-17 10:44:44本课程是实战课程,需要了解html和html5的基础知识,掌握css和css3的知识;主要讲解移动商城的首页、商城的分类、商城的购物车、商城的会员等... -
纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小
2019-06-15 09:34:31利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。...CSS中有一个resize属性,如果一个元素的overflow属性值不是visible,则通过设置resize属性可以拉伸这... -
css3 发光效果
2019-02-15 18:38:18css3模拟发光的效果 -
CSS3新特性总结及CSS组件、特效汇总
2019-07-18 14:49:17本文分2部分:之前写的CSS3新特性详解篇,共6篇博文总结;常见的一些CSS组件、效果汇总(不包括BootStrap等前端框架已实现的CSS组件)。常用组件、效果包括:基于border的各种箭头实现,滤镜使用等。 -
CSS3 基础(3)—— CSS3背景和背景渐变
2018-07-01 10:14:00CSS3中和元素背景相关的属性 属性 说明 background-clip 指定背景的绘制区域 background-origin 设置背景图片的定位 (一)background-clip 设置背景图像区域 background-clip属性指定了背景... -
CSS3 animation(CSS3 帧动画)
2013-12-14 12:06:47以前浏览器中的DOM动画都是通过js来实现的,现在css3提供了动画功能,即animation,下面是一个进度条的例子来说明如何使用。 -
CSS:CSS3 计数器
2014-05-11 11:52:00CSS3里面有个很强大的工具,计数器,可以很方便地来给元素编号。 记得以前还想尽办法得想通过Struts2的迭代器来排序,结果发现受限于内容根本实现不了。。 Css3计数器总共需要3个东东: 1. counter-reset... -
CSS3 的动画应用
2020-06-23 10:00:05写这玩意的目的 ...如果是每次一个提示框出来,用户不觉得这个提示框新鲜了之后,自然就会...利用 CSS3 的动画 红底蓝字?蓝底红字?既然要追求 刺激 闪瞎狗眼,那就贯彻到底咯 demo1 先来个简单的 红底蓝字/蓝底红字 切换 -
【CSS3】8款好看的纯CSS3搜索框
2017-03-17 15:14:08演示效果:全部代码如下:<!DOCTYPE html> , initial-scale=1.0"> <title>8款纯CSS3搜索框</title> <link href="ht -
CSS3实现3D立体效果
2016-09-02 17:04:12CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性,主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX... -
CSS学习教程之玩转CSS3色彩
2020-02-27 21:15:47CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们... -
CSS3 @midea
2017-02-08 14:24:46转:http://www.runoob.com/css3/css3-mediaqueries.html 转:http://www.runoob.com/css3/css3-mediaqueries-ex.html -
HTML5&CSS3笔记:CSS3过渡、变形和动画
2016-10-22 07:58:36HTML5&CSS3笔记:CSS3过渡、变形和动画 -
CSS3新增选择器
2019-04-21 17:53:55但是css3又新增了一些选择器,可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码,便捷开发。下面介绍: css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器 属性... -
CSS3练习合集
2016-08-16 16:57:42CSS3还原练习合集 -
跟考拉老师学HTML5和CSS3
2017-08-24 14:37:51基于企业的实战需求,精心研发了这套实战课程(HTML5+CSS3),内容从新增的HTML5、CSS3标签入手,详解响应式和移动页面布局及各种注意事项,精讲多个典型实战项目,由浅入深、系统扎实的掌握全栈前端的技能
-
前端性能优化
-
【数据分析-随到随学】机器学习模型及应用
-
1679. Max Number of K-Sum Pairs
-
国家注册信息安全工程师体系课程(CISP-PTE)
-
js基础知识带点汇总
-
【台大林轩田《机器学习基石》笔记】Lecture 5——Training versus Testing
-
根据霍夫变换在图像中寻找直线
-
FFmpeg4.3系列之26:视频监控之H265多路摄像头播控项目实战
-
三星GSAT准备资料
-
基于STM32于L298N电驱的最基础前进小车(无遥控版本)
-
彻底学会正则表达式
-
(新)备战2021软考系统集成顺利通关套餐
-
西瓜书的西瓜数据集,用于决策树算法
-
Clouder认证课程:云数据库管理与数据迁移.png
-
7-6 A-B (20分)
-
单片机完全学习课程全五季套餐
-
信息论大作业-基于PYTHON的常用无失真编码方式
-
Qt静态函数发送信号
-
C#文件传输、Socket通信、大文件断点续传
-
博客