慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

程显艺

not关键词: 使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如： @media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。 only关键词: only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen；另外不支持Media Queries的浏览器，不论是否支持only，样式都不会被采用。如 <linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" /> 在Media Query中如果没有明确指定Media Type，那么其默认为all，如： <linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" /> 另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。 <linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /> 上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。到目前为止，CSS3 Media Queries得到了众多浏览器支持，除了IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。还有一个与众不同的时，Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
悠悠河边草

实心上半圆：方法：把高度(height)设为宽度（width）的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。实心圆：方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码：

查看全部

0 采集收起来源：CSS3边框圆角效果 border-radius
2015-08-13
颜枫

text-overflow 与 word-wrap text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法：text-overflow:clip 剪切| ellipsis显示省略标记 word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。语法：word-wrap:normal(控制连续文本换行) | break-word（内容将在边界内换行）但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-08-13
颜枫

渐变色彩 linear-gradient:渐变类型,线性渐变。径向为radial-gradient linear-gradient(to bottom , #fff ,#999) 第一个参数为方向，第二个参数为颜色，颜色参数可以有多个 0deg to top 从下向上,90deg to right 从左向右,180deg to bottom 从上向下,270deg to left 从右向左,to top left 右下角到左上角,to top right 左下角到右上角

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-08-13
程显艺

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示： W3C标准盒模型

查看全部

0 采集收起来源：CSS3 盒子模型
2015-08-13
程显艺

跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all

查看全部

1 采集收起来源：CSS3 跨列设置column-span
2015-08-13
Joeylucky

/*设置缩略图形状*/ .slider li a::after{ content:""; display: block; height: 120px; width: 120px; border: 5px solid #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -60px; z-index: 999; top: -80px; } /*给缩略图添加蒙板效果*/ .slider li a::before{ content:""; display: block; height: 120px; width: 120px; border: 5px solid #fff; border-radius: 50%; position: absolute; left: 50%; margin-left: -60px; z-index: 99999; top: -80px; background: rgba(0,0,0,0.3); } /*鼠标悬浮时，修改缩略图蒙板透明度*/ .slider li a:hover::before{ opacity:0; } @keyframes notTarget { 动画的样式写动画名时不能加引号 0% { z-index: 75; } 100% { z-index: 75; } }

查看全部

0 采集收起来源：切换背景图像综合练习题
2018-03-22
Joeylucky

::before和::after 可以制作阴影效果 .effect::before{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
lqh

background-size:cover contain %

查看全部

0 采集收起来源：CSS3背景 background-size
2015-08-13
lqh

background-clip:border-box padding-box content-box

查看全部

0 采集收起来源：CSS3背景 background-clip
2015-08-13
yyk_7

background-image:linear-gradient(to left,#000,#999);从右到左 linear-gradient(to bottom right, red , blue); /* 标准的语法 */ background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */

查看全部

1 采集收起来源：CSS3颜色渐变色彩
2015-08-12
lqh

text-shadow:x-offset y-offset blur color box-shadow:x-offset y-offset kuozhanbanjin mohu color inset

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2015-08-12
lqh

@font-face{ font-family:"a";src:url("")}p{font-family:"a"}

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
lqh

text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-wrap:normal/break-word;显示或省略

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-08-12
lqh

radial linear gradient to top 90deg linear-gradient(to top,#fff, #999)

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-08-12

首页上一页 817 818 819 820 821 822 823 下一页尾页

0/150

提交

取消

开始学习

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

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