慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

hamsecret

.effect{ position:relative; -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 5px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .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; } 优美的伪元素为基础产生的效果

查看全部

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

::selection{ background: orange; color: white; } ::-moz-selection{ background: orange; color: white; } 选中文本的样式的编辑

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2015-05-31
hamsecret

input[type="radio"] + span { opacity: 0; } input[type="radio"]:checked + span { opacity: 1; } 自定义表单元素

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2018-03-22
hamsecret

input[type="text"] enable { border: 1px solid #f36; box-shadow: 0 0 5px #f36; } input[type="text"]:disabled{ box-shadow: none; } 设置元素在可用和不可用的情况下的样式

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
hamsecret

.wrapper > div:nth-of-type(-n+1), .wrapper > p:nth-of-type(2n){ background: orange; } /*或者*/ .wrapper > div:nth-of-type(2n+1), .wrapper > p:nth-of-type(2n){ background: orange; } /*或者*/ .wrapper > div:nth-of-type(odd), .wrapper > p:nth-of-type(even){ background: orange; } nth-of-type()父元素中制定的元素

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2018-03-22
hamsecret

.wrapper > div:first-of-type { background: orange; } wrapper中的第一个div的样式

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2018-03-22
hamsecret

ol > li:nth-last-child(5){ background: orange; } 一列元素中的倒数第5个元素

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-last-child(n)
2018-03-22
hamsecret

ol > li:nth-child(2n-1){ background: green; } 按照括号里面的2n-1来选择一组元素中的某一些元素

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2018-03-22
hamsecret

#brand:target p { background: orange; color: #fff; } click事件css版

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2015-05-31
hamsecret

:root{ background:blue; } :root选择器等同于html

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2015-05-31
hamsecret

a[class^=column]{ background:red; }/*class中以column开始的*/ a[href$=doc]{ background:green; }/*href中以doc结尾的*/ a[title*=box]{ background:blue; }/*title中包含box*/

查看全部

0 采集收起来源：CSS3选择器属性选择器
2015-05-31
Adorrable坛子

text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-05-30
Adorrable坛子

linear-gradient

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-05-29
Adorrable坛子

这都是些什么鬼

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-05-29
溱源

伸缩布局（一） CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

查看全部

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

首页上一页 926 927 928 929 930 931 932 下一页尾页

0/150

提交

取消

开始学习

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

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