慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

weibo_上帝却羞了_0

文本阴影text-shadow text-shadow可以用来设置文本的阴影效果。语法： text-shadow: X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。比如，我们可以用下面代码实现设置阴影效果。 text-shadow: 0 1px 1px #fff

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2015-01-22
weibo_上帝却羞了_0

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法： text-overflow:clip(表示剪切) | ellipsis(表示显示省略标记) 但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。语法： word-wrap:normal(表示控制连续文本换行) | break-word(表示内容将在边界内换行) normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可。

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-02-25
湮果惑

overflow:hidden; text-overflow:ellipslis; white-space:nowrap;

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-01-22
湮果惑

background-image:linear-gradient(角度，颜色1,颜色2) 0deg-360deg to top left 左上 to top right 右上

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-01-22
湮果惑

color:rgba(0,0,0,0-1)

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-01-22
聼雨

文本定义在bacground里面图片引用之后用no-repeat 然后是所处位置/ 背景图片的尺寸列如no-repeat left top/70% 55% 意思是不重复位置在左上角图片大小为整个尺寸的长７０％　宽的５５％

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds
2015-01-22
真情见我

1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2015-01-22
真情见我

在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22
真情见我

在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

查看全部

0 采集收起来源：Media Queries使用方法
2015-01-22
湮果惑

【可省参数】阴影半径，越大越模糊，正值，最小为0 扩展半径，正负值，正值阴影变大，反之变小【不可省】 x轴和y轴半径都可以为正负值，方向不同 box-shaow:x轴 y轴 [阴影半径] [扩展半径] 颜色 [内外]

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（二）
2015-01-22
湮果惑

box-shadow:x轴偏移 y轴偏移阴影半径阴影颜色内阴影(inset,写在开头或结束)

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-01-22
湮果惑

border-radius:左上右上右下左下（顺时针）

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-01-23
湮果惑

只能知道是逐帧浏览器兼容动画

查看全部

0 采集收起来源：什么是CSS3？
2015-01-22
深秋色

Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-01-21
深秋色

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-01-21

首页上一页 1135 1136 1137 1138 1139 1140 1141 下一页尾页

0/150

提交

取消

开始学习

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

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