慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

yk008

Media Queries——媒体类型（一）一、媒体类型媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。值设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 Tv 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端其中Screen、All和Print为最常见的三种媒体类型。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2015-06-16
咧开嘴角就叫笑

RGBA是在RGB的基础上增加了控制alpha透明度的参数。语法： color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-06-16
咧开嘴角就叫笑

为边框应用背景图片，和background属性比较相似。例如： background:url(xx.jpg) 10px 20px no-repeat; 但是又比背景图片复杂一些：一个矩形，有四个边框，图片会自动被切割分成四等分，用于四个边框。用法： border-image:url(borderimg.png) 70 70 70 70 repeat 第一部分：图片路径第二部分：切割图片的宽度，单位为px但省略(可以使用百分比)，顺时针规则，值相同可简写第三部分：图片延伸方式：round(平铺),repeat(重复),stretch(拉伸)

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2015-06-16
咧开嘴角就叫笑

1、阴影模糊半径与阴影扩展半径的区别阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； 2、X轴偏移量和Y轴偏移量值可以设置为负数

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2015-06-16
咧开嘴角就叫笑

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; X轴偏移量：必需。水平阴影的位置。允许负值。 Y轴偏移量：必需。垂直阴影的位置。允许负值。阴影模糊半径：可选。模糊距离。阴影扩展半径：可选。阴影尺寸。阴影颜色：可选。阴影的颜色，省略默认为黑色。投影方式：可选。（设置inset时为内部阴影方式，如果省略为外部阴影方式）。注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-06-16
咧开嘴角就叫笑

border-radius是向元素添加圆角边框。 border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，『顺时针』 */ 1.实心上半圆：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 2.实心圆：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ }

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-06-16
yk008

7.水平垂直居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } 8.Flex项目实现自动伸缩您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; } display：flex 指定元素为伸缩布局 flex-direction:row（布局成一行）/column（布局成一列） align-items:flex-start/center/flex-end(设定垂直的,居上/居中/局下) justify-content:flex-start/center/flex-end(水平的居左/居中/居右) 注意：只对块级元素有用，也很好理解块级元素才能在里面进行布局

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-06-16
yk008

伸缩布局（二） 5.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; } 6.Flex项目移动右边 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-06-16
yk008

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-06-16
yk008

伸缩布局（一）:Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 1.创建一个flex容器:任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit， .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示:Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示:.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部:如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-06-16
yk008

盒子模型盒模型定义了Web页面中的元素中如何来解析。CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响从图中可以看出padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。 box-sizing： 1.W3C标准盒模型外盒尺寸计算（元素空间尺寸）element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度）在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit 属性值属性值说明 content-box 默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height border-box 重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。

查看全部

0 采集收起来源：CSS3 盒子模型
2015-06-16
咧开嘴角就叫笑

前缀浏览器 -webkit chrome safari -moz firefox -ms ie -o opera

查看全部

0 采集收起来源：什么是CSS3？
2015-06-16
yk008

跨列设置column-span 主要用来定义一个分列元素中的子元素能跨列多少。如有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下：column-span: none | all 属性值属性值说明 none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。 (貌似只有Chrome,Opera支持这个功能，在Firefox上没有反应） IE11 可用

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-06-16
yk008

列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 属性值属性值说明 column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为 “medium”， column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) 例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为： column-rule: 2px dotted green;

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2018-03-22
yk008

列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 属性值属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。例如：将内容分三列显列，列与列之间的间距为2em，实现代码为： column-count: 3; column-gap: 2em;

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22

首页上一页 909 910 911 912 913 914 915 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果