细说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规范之前，或者在一...
收起
javascript 前端
HTML5 3D/CSS3 3D爱心动画项目实例源码
千次下载 热门讨论 2014-08-20 11:30:37
大家可以点解DEMO来看看。CSS3代码，对这些线条进行渲染，以便其有3D的视觉效果。很多div，主要是构造爱心的线条区域。
收起
HTML5
CSS3文字描边效果
万次阅读 2017-09-25 19:17:55
CSS3 文字描边
收起
什么是CSS3，CSS3能做什么？
千次阅读 2018-11-23 10:20:41
CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能，目前主浏览器 Chorme、Safari、Firefox、Opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写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打包
纯CSS实现左右拖拽改变布局大小使用CSS3中resize属性水平,垂直拖动元素,改变大小
万次阅读 多人点赞 2019-06-15 09:34:31
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。...CSS中有一个resize属性，如果一个元素的overflow属性值不是visible，则通过设置resize属性可以拉伸这...
收起
CSS3动画位移
千次阅读 2019-01-31 09:47:42
CSS3动画位移（作者：王金蝶，撰写日期：2019.01.31）下图为CSS3位移的HTMLL图片的插入下面为CSS3位移的设置，水平方向和垂直方向的位移量，设置不断执行时间，图片大小和圆角大小以上为CSS3...
收起
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，下面是一个进度条的例子来说明如何使用。
收起
CSS3 的动画应用
万次阅读 2020-06-23 10:00:05
写这玩意的目的 ...如果是每次一个提示框出来,用户不觉得这个提示框新鲜了之后,自然就会...利用 CSS3 的动画红底蓝字?蓝底红字?既然要追求刺激闪瞎狗眼,那就贯彻到底咯 demo1 先来个简单的红底蓝字/蓝底红字切换
收起
css html5
【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:12
CSS3实现3D效果 1. 涉及到的几个CSS3属性首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。这里涉及到3d转换的主要介绍旋转。下面通过一组rotate效果直观理解rotateX...
收起
3d
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 @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)

CSS3+JS完美实现放大镜模式

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简介

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

CSS3文字描边效果

什么是CSS3，CSS3能做什么？

CSS3关键帧

CSS3新特性

H5+CSS3移动商城实战课程

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

CSS3动画位移

css3 发光效果

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

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

CSS3 animation（CSS3 帧动画）

CSS3 的动画应用

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

CSS3实现3D立体效果

CSS学习教程之玩转CSS3色彩

CSS3 @midea

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

CSS3新增选择器

CSS3练习合集

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

css3

OpenCV图像、视频的读取与基本处理

多功能盲人智能拐杖的设计

Python实现简单的数据结构

亿度云盘~Java小白入门实战

Qt项目实战之基于Redis的网络聊天室

python函数基础

CSS(二)

基于MAX10的多路PWM控制系统研究

02-2.8LCD显示屏STM32F103C8T6_SPI例程.rar

全网唯一的为GIS+BIM而生的cesiumjs或cesium视频教程

C++改变控制台输出的文字/背景颜色

AIS轨迹动态插值在实时视景显示中的应用

一类新超混沌系统的动力学行为及电路实现

带状线馈电网络的频扫天线设计

Java 11核心技术简明视频教程

商业的本质——杰克·韦尔奇著

Python专题精讲 随机与抽样

MytreeView.zip

uni-app实现跨端兼容

chrome

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

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

Python专题精讲随机与抽样