慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

张益韶

body { display:flex; align-items:center; justify-content:center; } 自适应入门级代码

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-06-30
张益韶

width it's width of content with W3C standard IE it's the width that contains border padding and content

查看全部

0 采集收起来源：CSS3 盒子模型
2015-06-30
张益韶

在自适应布局当中，在元素基础上添加内距padding，按照标准盒模型解析，往往会将布局撑破，但使用box-sizing的border-box值，可以让你轻松完成。在CSS编辑器第49-53行输入正确代码，让布局能正常显示。

查看全部

0 采集收起来源：CSS3 盒子模型
2015-06-30
Thinker_Ac

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

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2015-06-29
Thinker_Ac

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

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-06-29
KOFer

@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 其他部分css可以用font-family查询到新添加的服务器端字体

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2015-06-29
KOFer

text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 应该联合使用才有省略号效果(...) 如果无overflow:hidden 和white-space:nowrap 则不会有省略效果

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-06-29
jolly_chen

文字省略 text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-06-29
慕用7077196

1.用伪元素和线性渐变画出中间细线 content:""; background:linear-gradient(to bottom,#f82f87,#c4444d,#f82f87); 2.last-child::after 伪类选择器选中最后一li后面的content li:last-child::after 3.box-shadow box-shadow:1px 6px 0px #e64545;

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2018-03-22
wannasing

克里尔辣舞 media queries——媒体类型（二）在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种： link方法 link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> @import方法 @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法 @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。（1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>

查看全部

0 采集收起来源：media queries——媒体类型（二）
2018-03-22
慕用7077196

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。语法缩写如下： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 注意：用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2018-03-22
张益韶

变形--矩阵 matrix() matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-06-29
张益韶

radio效果实在不错，值得借鉴

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2015-06-29
慕用7077196

background-clip 用来将背景图片做适当的裁剪以适应实际需要。语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。

查看全部

0 采集收起来源：CSS3背景 background-clip
2015-06-29
慕用7077196

background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-06-29

首页上一页 895 896 897 898 899 900 901 下一页尾页

0/150

提交

取消

开始学习

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

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