慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qq_再不相爱就老了_0

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2015-03-27
qq_再不相爱就老了_0

圆角效果以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。

查看全部

0 采集收起来源：CSS3能做什么？
2015-03-27
黄木木

11122333333322232

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2015-03-27
虹之翼

#brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2015-03-27
虹之翼

结构性伪类选择器—target :target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。示例展示点击链接显示隐藏的段落。 HTML代码： <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> CSS代码： .menuSection{ display: none; } :target{/*这里的:target就是指id="brand"的div对象*/ display:block; } 分析： 1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand 2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。多个url（多个target）处理：就像上面的例子，#brand与后面的id="brand"是对应的，当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2018-03-22
虹之翼

结构性伪类选择器—empty :empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。示例显示：比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。 HTML代码： <p>我是一个段落</p> <p> </p> <p></p> CSS代码： p{ background: orange; min-height: 30px; } p:empty { display: none; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—empty
2018-03-22
洛雪

::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。 .clearfix::before, .clearfix::after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} 当然可以利用他们制作出其他更好的效果，比如右侧中的阴影效果，也是通过这个来实现的。关键代码分析： .effect::before, .effect::after{ 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; } 上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。

查看全部

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

:read-write选择器 “:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2015-03-27
洛雪

:read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2015-03-27
虹之翼

结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2018-03-22
洛雪

::selection选择器 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的,有的时候设计要求,不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。注意： 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2015-03-27
x兔子

.5s ease-in .2s 第一个时间是整个过渡的时间，第二个是触发的延迟时间

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2015-03-27
武漢青

慢慢研究

查看全部

0 采集收起来源：CSS3中的动画--过渡延迟时间 transition-delay
2015-03-26
武漢青

这个好玩，元编程正方形

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2015-03-26
武漢青

不错的鼠标过度效果

查看全部

0 采集收起来源：CSS3中的动画--过渡属性 transition-property
2015-03-26

首页上一页 1024 1025 1026 1027 1028 1029 1030 下一页尾页

0/150

提交

取消

开始学习

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

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