细说CSS(CSS+CSS3)
千人学习 2019-07-19 10:05:13
本课程包含7章45个小节课程，内容涵盖：CSS基础、CSS选择器、CSS属性和属性值、CSS 边框和背景、CSS盒子模型、文本样式等。
收起

css1 css2 css3 区别

千次阅读 2018-02-10 13:28:16

css1 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:44
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
收起
HTML5和CSS3
千人学习 2017-11-23 11:21:58
HTML5新特性和CSS3的使用案例，从入门到精通。
收起

CSS3box-shadow属性详解

万次阅读 多人点赞 2019-04-27 19:18:37

CSS3 --添加阴影（盒子阴影的使用） 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:09
CSS3即层叠样式表（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选择器
CSS样式(I) 文本
CSS样式(II) 背景与超链接
CSS样式(III) 列表与表格
CSS布局与定位
盒子模型(I) overflow和border
盒子模型(II) padding和margin
CSS定位机制 display、float和position
CSS3
CSS3(I) 圆角边框与阴影
CSS3(II) 文本与文字
CSS3(III) 2D转换
CSS3(IV) 过渡与动画
CSS3(V) 3D变换

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和视频内容，如果有不清晰的知识点，可以搜索孙俏老师的视频进行学习，整理不易，有用记得收藏+点赞+评论哦。

单位	描述
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

属性描述	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

背景属性	取值
背景颜色 background-color:	red , #f00 ，rgb(255,0,0)
背景图片 background-image:	url(“logo.jpg”)
背景重复 background-repeat:	repeat repeat-x repeat-y no-repeat
背景 background	颜色图片 repeat

链接的四种状态	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方悬停
a:active	链接被点击的时刻

属性	描述
list-style	所有用于列表的属性设置于一个声明中
list-style-image	为列表项标志设置图像 url(“images/bullet1.gif”);
list-style-position	标志的位置 list-style-position: inside ;list-style-position: outside;
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表格	描述
width , height	设置表格大小
border 属性	边框 border: 1px solid #eee;
border-collapse 属性	合并边框 border-collapse:collapse;
奇偶选择器	:nth-child(odd\|even)

overflow属性描述	取值
超出部分不可见	hidden
显示滚动条	scroll
如果有超出部分，显示滚动条	auto

border属性	描述
border-width:	px、 thin、medium、thick
border-style:	dashed、dotted、solid、double
border-color:	颜色
border:	width style color

组成	内边距外边距
上右下左	padding:5px; margin:5px;
上	padding-top :10% ; margin-top :10% ;
左	padding-left ；margin-left ；
右	padding-right；margin-right ；
下	padding-bottom；margin-bottom；

元素分类——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;

浮动定位	取值
float属性	left、right
clear属性	left、right、both

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的父元素

圆角边框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	右下角的形状

过渡transition	描述
transition	属性名持续时间过渡方法
transition-property	属性名\|all 对哪个属性进行变化
transition-duration	持续时间
transition-timing-function	过渡使用的方法(函数)
transition-delay	延迟

值	描述
linear	匀速
ease	慢快慢
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

值	描述
animation	简写
animation-name	引用 @keyframes 动画的名称
animation-duration	动画完成时间
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-play-state	running \| paused

收起

展开全文

CSS3简介

千次阅读 2018-05-13 11:29:49

文章介绍:介绍CSS3是什么以及它能够为Web页面做什么，还会介绍如何使用javascript有效地控制CSS3的功能1，特定厂商的属性和前缀 CSS厂商前缀是浏览器公司在新的或实验性的CSS3功能成为正式的CSS3规范之前，或者在一...

    文章介绍:介绍CSS3是什么以及它能够为Web页面做什么，还会介绍如何使用javascript有效地控制CSS3的功能
1，特定厂商的属性和前缀
    CSS厂商前缀是浏览器公司在新的或实验性的CSS3功能成为正式的CSS3规范之前，或者在一个规范的功能还没有最后确定之前，提供对齐支持的一种方式。当该功能通过其标准CSS3术语变得完全得到支持之后，这些前缀通常变为不必要的。
    可能使用的前缀有:
浏览器:公司前缀 ：  Android:-webkit-    Chrome:-webkit-   Firefox:-moz-   IE: -ms-  IOS: -webkit-  Opera: -o-
                            safari: -webkit-
    在大多数情况下，当你需要使用CSS3规范中的属性且需要使用一个前缀的时候，针对所使用的浏览器，添加上面的前缀就可以了，例如，如果想要添加一个CSS过渡效果，使用transition属性，并且先添加如下前缀:
    -webkit-transition:background 0.5s ease;
    -moz-transition:background 0.5s ease;
    -o-transition:background 0.5s ease;
    transition:background 0.5s ease;
    用户的浏览器将会对它所理解的过渡功能版本做出响应，而忽略其他的版本。
    好在，浏览器厂商对于全面实现所有的CSS3功能竭尽全力，并且对于大多数现代浏览器来说，需要添加前缀的属性的数目正在快速减少。
#对于那些功能需要添加前缀，可以浏览: http://shouldiprefix.com/
2，CSS3边框
    CSS3允许你对边框做一些真正很酷的事情，而这些在以前只能够使用大量复杂的且难以维护的代码去实现。
    下面将介绍两个示例:边框阴影和圆角。
（1）创建边框阴影
    box-shadow属性允许你为页面的box元素添加阴影。如下所示，可以分别为颜色，大小，模糊和偏移量指定值。
    阴影参数
box-shadow属性的参数阴影参数 动作
h-shadow(必须的) 水平阴影的位置。复制1不允许的
v-shadow(必须的) 垂直阴影的位置。复制是不允许的
blur(可选的) 模糊距离
spread(可选的) 阴影的大小
color(可选的) 阴影的颜色，默认为黑色
    如下的示例使用了一个10像素宽的向下和向右伸展的阴影，在其整个宽度中模糊，并且颜色为中度灰：
<html>
<head>
<title>创建边框阴影</title>
<style>
#div1{
	background-color:#8080ff;
	width:400px;
	height:250px;
	box-shadow:10px 10px 10px #8080ff;
	}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
    代码生成的HTML页面如下:

（2）用border-radius属性实现圆角
    border-radius属性允许我们给页面元素添加圆角，而不需要专门创建圆角图像。
代码:
<html>
<head>
<title>创建边框阴影</title>
<style>
#div1{
	background-color:#8080ff;
	width:400px;
	height:250px;
	border-radius:25px;
	}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果：

    可以使用单独的border-bottom-left-radius,border-top-left-radius,border-bottom-right-radius,border-top-right-radius属性来风别指定圆角。
3，CSS3背景
（1）background-size属性
    background-size属性给CSS添加了一项新的功能，允许使用长度，百分比，或者另外的两个关键字contain或cover来设置背景图像的大小。
    使用长度和百分比来指定背景图像的大小，这就像预期的一样工作。对于每个背景图像，可以提供两个长度或百分比，分别针对宽度和高度(当使用百分比的时候，它们是相对于背景的可用空间，而不是相对于背景图像的宽度和高度)。
    auto关键字用于替代width会height值，如果只为background-size指定了一个值，将会认为其是宽度。然后，高度将会默认为auto。
（2）background-origin属性
    background-origin属性用于设置一个背景在框中的位置如何计算。
    它接收以下三个值之一:padding-box,border-box或content-box。
    当你提供了padding-box值，其位置相对于边距边缘的左上角。使用border-box，其位置相对于边框的左上角，而content-box表示背景相对于内容的左上角来定位。
（3）多背景图像
    CSS3允许我们对框元素使用多个背景图像，直接使用逗号隔开一个列表就可用了。列表的顺序很重要，所提供的第1个值表示距离用户最近的层，列表中的后续条目会作为该层之后的后续层呈现。如下是一个示例:
#div1{
	width:400px;
	height:250px;
	background-image:url(1.jpg),url(2.jpg)	
	background-position:center bottom,left top;
	background-repeat:no-repeat；
	}
4，CSS3渐变
    CSS3渐变允许你在两种或多种指定的颜色之间生成平滑的过渡，而在此之前，必须使用图像来实现这种效果。和使用图像相比，使用CSS3渐变可以减少下载的时间，节省缓存空间，减少带宽的使用，当需要缩放的时候，CSS3渐变也执行的更好。
    CSS3提供了两种类型的渐变:线性渐变，分别沿着上/下/左/右/对角线的方向进行;还有放射渐变，从一个确定的中心点向外围放射。
（1）线性渐变
    要使用CSS创建线性渐变，必须至少定义两种颜色作为渐变的端点。也可以为渐变效果设置一个起点和一个方向(即从上到下，从左到右或是对角线)。
#div1{
	width:400px;
	height:250px;
	background:linear-gradient(red,#6699cc)
	}
    
    当不为渐变指定一个方向时，默认方向为由上到下。也可以为渐变指定一个方向，例如，假设要采用由左到右的渐变方向，可以使用 to right  如下所示，相关的还有，to top，to left, to  bottom  right.
#div1{
	width:400px;
	height:250px;
	background:linear-gradient( to right,red,#6699cc)
	}

    
（2）放射渐变
    放射渐变由其中心点确定，并且(和对应的线性渐变一样)也必须至少定义两种颜色，作为渐变效果的端点:
    background：radial-gradient(red,#6699cc)
    这种方式所定义的放射渐变如下图所示

    也可以使用关键字at，为放射渐变的中心设置一个位置参数：
    background：radial-gradient(at top left,red,#6699cc);
    效果如下图所示

    CSS3 渐变能做的还很多，还包括使用两种以上的颜色，透明度，以及修改渐变的形状和大小等，具体的介绍可见W3C的文档:  http://www.w3.org/TR/2011/WD-css3-images-20110217/。
5，CSS3文本效果
    CSS3包含了一些新的功能来帮助操作文本。
（1）文本阴影
    box-shadow属性可以对块元素添加阴影，在CSS3中，text-shadow属性为文本添加阴影的方式如出一辙。我们为阴影指定水平和垂直的阴影距离以及可选的模糊距离，并且指定阴影颜色:
h3{
	text-shadow:10px 10px 3px #333;
	font-size:26px;
	}
效果如下所示:

（2）单词换行
    如果一句话太长了，以至于块元素无法包含它，它会超出其容器的范围。在CSS3中，可以使用word-wrap属性强制让单词换行，即便是必须从一个单词的中间换行也可以：
    p{
        word-wrap: break-word;
    }
6，CSS3过渡，变换和动画
    传统上，程序员必须使用定制的javascript代码在页面元素中创建动画，要一跨浏览器的方式实现这一点将会很麻烦。如果有一种容易的方式能够为页面上的元素添加简单的效果，情况就会好很多
    CSS3中现在引入了这些功能，以过度，变换和动画的形式呈现。在大多数浏览器中，它们以及得到了不同程度的支持。在如下的简单示例中，我们添加了一个过渡效果(在那些支持它的浏览器中)，以便在链接上悬停的时候变换背景颜色。随着背景颜色的变化，过渡效果将平滑的进行。
    如下是针对示例链接的代码:
<html>
<head>
<title>颜色渐变</title>
<style>
a.trans{
	background:#669999;
	transition:background 0.5s ease;
	}
a.trans:hover{
	background:#999966;
	}
</style>
</head>
<body>
<a href="somepage.html" class="trans" id="link1">show me</a>
</body>
</html>
效果如下:
 
7，在javascript中引用CSS3属性
    CSS3和javascript组合起来，提供了一些很好的效果，而且性能不错，可靠性高，并且将代码的复杂度最小化。在本节中，我们将介绍在javascript代码中成功地获取和设置CSS3属性的一些方法。
（1）DOM getComputedStyle()方法
    现在，几乎所有的浏览器都支持DOM getConputedStyle()方法，它可以访问一个元素的最终的(也就是计算后的)样式。最终样式，指的是浏览器（以适当的顺序）应用了与该元素相关的所有样式规则之后，最终线上该元素的样式。getComputedStyle()方法返回一个对象，该对象带有各种方法，包括getPropertyValue(property)方法，这个方法返回了给定的CSS属性名的当前值:
    var myDiv = document.getElementById("div1");
    var bRad = getComputedStyle(myDiv).getPropertyValue("borderRadius");
一段使用按钮控制效果的小程序:
<title>实现一个光照效果</title>
<style>
#div1{
	width:600px;
	height:350px;
	background-color:#6699cc;
	}
#div2{
	background-color:#aaaaff;
	width:80px;
	height:80px;
	padding:20px;
	position:relative;
	left:240px;
	top:105px;
	box-shadow:10px -10px 10px #808080;
	}
</style>
<script>
	window.onload = function(){
		document.getElementById("btn1").onclick = function(){
				document.getElementById("div1").style.background = "linear-gradient(to right,red,#6699cc)"
			}
		document.getElementById("btn2").onclick = function(){
				document.getElementById("div1").style.background = "linear-gradient(to top,red,#6699cc)"
			}
		document.getElementById("btn3").onclick = function(){
				document.getElementById("div1").style.background = "linear-gradient(to top right,red,#6699cc)"
			}
		}
		
</script>
</head>
<body>
<div id = "div1">
	<div id="div2">
		LIGHTS:<br/>
		<input type="button" id="btn1" value="Top Lfet"></br>
		<input type="button" id="btn2" value="Top Right"></br>
		<input type="button" id="btn3" value="Bottom">
	</div>
</div>
</body>
</html>

box-shadow属性的参数
阴影参数	动作
h-shadow(必须的)	水平阴影的位置。复制1不允许的
v-shadow(必须的)	垂直阴影的位置。复制是不允许的
blur(可选的)	模糊距离
spread(可选的)	阴影的大小
color(可选的)	阴影的颜色，默认为黑色

收起

展开全文

javascript 前端

HTML5 3D/CSS3 3D爱心动画项目实例源码
千次下载 热门讨论 2014-08-20 11:30:37
大家可以点解DEMO来看看。CSS3代码，对这些线条进行渲染，以便其有3D的视觉效果。很多div，主要是构造爱心的线条区域。
收起
HTML5
什么是CSS3，CSS3能做什么？
千次阅读 2018-11-23 10:20:41
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能，目前主浏览器 Chorme、Safari、Firefox、Opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3...
收起
CSS3文字描边效果
万次阅读 2017-09-25 19:17:55
CSS3 文字描边
收起
CSS3关键帧
千次阅读 2020-03-15 09:51:27
CSS3关键帧 CSS3 @keyframes keyframes定义关键帧，可以指定任何顺序排列来决定animation动画变化的关键位置使用说明使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。在动画中可以通过@...
收起
css html js html5
CSS3新特性
千次阅读 多人点赞 2019-01-24 16:31:54
CSS3新特性欢迎访问我的博客https://qqqww.com/，祝所有码农同胞们早日走上人生巅峰，迎娶白富美~~ 声明：本文参考 W3C CSS3 教程、菜鸟教程等，详细移步 W3C 或菜鸟教程用 CSS3 做过一些小动画，很...
收起
H5+CSS3移动商城实战课程
千人学习 2019-05-17 10:44:44
本课程是实战课程，需要了解html和html5的基础知识，掌握css和css3的知识；主要讲解移动商城的首页、商城的分类、商城的购物车、商城的会员等...
收起
webapp webapp打包
CSS3动画位移
千次阅读 2019-01-31 09:47:42
CSS3动画位移（作者：王金蝶，撰写日期：2019.01.31）下图为CSS3位移的HTMLL图片的插入下面为CSS3位移的设置，水平方向和垂直方向的位移量，设置不断执行时间，图片大小和圆角大小以上为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:18
css3模拟发光的效果
收起
CSS3新特性总结及CSS组件、特效汇总
千次阅读 2019-07-18 14:49:17
本文分2部分：之前写的CSS3新特性详解篇，共6篇博文总结；常见的一些CSS组件、效果汇总（不包括BootStrap等前端框架已实现的CSS组件）。常用组件、效果包括：基于border的各种箭头实现，滤镜使用等。
收起
CSS3 基础（3）—— CSS3背景和背景渐变
千次阅读 2018-07-01 10:14:00
CSS3中和元素背景相关的属性属性说明 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:00
CSS3里面有个很强大的工具，计数器，可以很方便地来给元素编号。记得以前还想尽办法得想通过Struts2的迭代器来排序，结果发现受限于内容根本实现不了。。 Css3计数器总共需要3个东东： 1. counter-reset...
收起
【CSS3】8款好看的纯CSS3搜索框
万次阅读 多人点赞 2017-03-17 15:14:08
演示效果：全部代码如下：<!DOCTYPE html> , initial-scale=1.0"> <title>8款纯CSS3搜索框</title> <link href="ht
收起
CSS学习教程之玩转CSS3色彩
千次阅读 2020-02-27 21:15:47
CSS3带来了一些新的处理颜色的方法，比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是，现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们...
收起
html html5
CSS3 的动画应用
万次阅读 2020-06-23 10:00:05
写这玩意的目的 ...如果是每次一个提示框出来,用户不觉得这个提示框新鲜了之后,自然就会...利用 CSS3 的动画红底蓝字?蓝底红字?既然要追求刺激闪瞎狗眼,那就贯彻到底咯 demo1 先来个简单的红底蓝字/蓝底红字切换
收起
css html5
CSS3实现3D立体效果
万次阅读 2016-09-02 17:04:12
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。这里涉及到3d转换的主要介绍旋转。下面通过一组rotate效果直观理解rotateX...
收起
3d
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:36
HTML5&CSS3笔记：CSS3过渡、变形和动画
收起
html5
CSS3新增选择器
千次阅读 2019-04-21 17:53:55
但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码，便捷开发。下面介绍： css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器属性...
收起
选择器
CSS3练习合集
千次阅读 2016-08-16 16:57:42
CSS3还原练习合集
收起
CSS3 transiton过渡与CSS3 渐变无效原因及解决方法
千次阅读 多人点赞 2018-03-10 22:04:23
无效原因：我们使用CSS3的gradient渐变属性是被当成背景图片(background-img)来看的。emmm以前我们是通过加载图片来实现渐变色的效果，现在是通过CSS3的gradient渐变属性就能来实现，也就是说让浏览器自己去绘制出...
收起

细说CSS(CSS+CSS3)

css1 css2 css3 区别

css1 css2 css3 区别

HTML5+CSS3 精美登陆界面源码

HTML5和CSS3

CSS3box-shadow属性详解

CSS3 --添加阴影（盒子阴影的使用）

名师精讲CSS3

[ CSS-CSS3 ] 更适合你的CSS样式一览表

CSS样式一览表

CSS样式

CSS添加方法

CSS选择器

CSS样式(I) 文本

CSS样式(II) 背景与超链接

CSS样式(III) 列表与表格

CSS布局与定位

盒子模型(I) overflow和border

盒子模型(II) padding和margin

CSS定位机制 display、float和position

CSS3

CSS3(I) 圆角边框与阴影

CSS3(II) 文本与文字

CSS3(III) 2D转换

CSS3(IV) 过渡与动画

CSS3(V) 3D变换

CSS3简介

（1）创建边框阴影

（2）用border-radius属性实现圆角

（1）background-size属性

（2）background-origin属性

（3）多背景图像

（1）线性渐变

（2）放射渐变

（1）文本阴影

（2）单词换行

（1）DOM getComputedStyle()方法

HTML5 3D/CSS3 3D爱心动画项目实例源码

什么是CSS3，CSS3能做什么？

CSS3文字描边效果

CSS3关键帧

CSS3新特性

H5+CSS3移动商城实战课程

CSS3动画位移

纯CSS实现左右拖拽改变布局大小 使用CSS3中resize属性 水平,垂直拖动元素,改变大小

css3 发光效果

CSS3新特性总结及CSS组件、特效汇总

CSS3 基础（3）—— CSS3背景和背景渐变

CSS3 animation（CSS3 帧动画）

CSS:CSS3 计数器

【CSS3】8款好看的纯CSS3搜索框

CSS学习教程之玩转CSS3色彩

CSS3 的动画应用

CSS3实现3D立体效果

CSS3 @midea

HTML5&CSS3笔记：CSS3过渡、变形和动画

CSS3新增选择器

CSS3练习合集

CSS3 transiton过渡与CSS3 渐变 无效原因及解决方法

css3

Vue.js：组件模板的分离写法

2021年 系统分析师 系列课

jupyter的使用.txt

华为1+X——网络系统建设与运维（高级）

记一次面试

centos date时间格式化

Windows系统管理

【RabbitMQ】消息可靠性投递（三）Queue存储消息

java 二维数组打印杨辉三角

整合营销传播系统.pdf

参数列表 是调用方给予方法的参数用于方法内的使用

基于SpringBoot+Spring Security+Jpa的校园图书管理系统

使用 Linux 平台充当 Router 路由器

c语言的文件指针结尾问题:有两个方法可以判断文件指针是否到结尾

基于遗传算法的平面阵列阵列稀疏（matlab程序）.zip

模仿百度窗口实现搜索功能？

a2a-ip-trust-ip-configuration：用于访问IP音频信任组件的OpenShift构建和部署配置-源码

装备制造行业智能制造方案.pptx

PowerBI重要外部工具详解

espnetv2

纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小

CSS3 transiton过渡与CSS3 渐变无效原因及解决方法

2021年系统分析师系列课

参数列表是调用方给予方法的参数用于方法内的使用